<template>
  <div class="page-editor" v-loading="loading">
    <div class="header relative">
      <a class="logo" href="/"
        ><img src="https://ecodestore.oss-cn-beijing.aliyuncs.com/newlogo.png" alt="" style="width: auto; height: 32px"
      /></a>
      <div class="components-box">
        <div>
          <div
            class="components-item float-left mr-4 p-2 mt-2 border w-25 rounded-2xl"
            v-for="(o, i) in commonList"
            :key="i"
          >
            <div @click="addComponents(o.title)">
              <div>
                <img :src="o.img2" style="width: 30px; height: 30px; margin: 0 auto; margin-top: 10px" />
              </div>
              <div class="text-center" style="padding-top: 10px; font-size: 14px">{{ o.title }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="absolute top-8 right-8"><login /></div>
      <div style="clear: both"></div>
      <el-divider />
    </div>
    <div class="con-box-wrap">
      <div class="absolute top-1 right-1">
        <el-switch
          v-model="value5"
          class="ml-2"
          inline-prompt
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          active-text="实时预览"
          inactive-text="关闭预览"
          @change="switchChange"
        />
      </div>
      <div class="title-box">
        <el-input v-model="title" placeholder="请在这里输入标题" size="large"></el-input>
      </div>
      <div class="con-box">
        <div v-for="(item, index) in list" :key="index">
          <div
            v-if="item.key === '文字' || item.key === '文本'"
            class="border"
            style="
              min-height: 90px;
              padding-top: 20px;
              padding-right: 20px;
              padding-left: 20px;
              margin: 0 10px;
              margin-top: 15px;
              background-color: #fff;
              border-radius: 5px;
            "
          >
            <div
              style="
                display: flex;
                flex: auto;
                flex-direction: column;
                justify-content: center;
                height: 90px;
                border-bottom: 1px #ebedf0 solid;
              "
            >
              <el-row custom-style="margin-bottom: 10px">
                <el-col :span="2">
                  <div class="text-center">
                    <el-icon :size="30" color="#999999" style="margin: 0 auto; margin-top: 20px"
                      ><ChatDotSquare
                    /></el-icon>
                  </div>
                </el-col>
                <el-col :span="20">
                  <div style="color: rgb(51 51 51 / 50%)">
                    <el-input
                      v-model="item.value"
                      :maxlength="-1"
                      rows="3"
                      placeholder="这里可以输入文本内容"
                      cursor-spacing="100"
                      border="none"
                      type="textarea"
                      style="height: 90px"
                    >
                    </el-input>
                  </div>
                </el-col>
                <el-col :span="2">
                  <div
                    class="text-center cursor-pointer"
                    @click="list[index].wzSetting.open = !list[index].wzSetting.open"
                  >
                    <el-tooltip class="box-item" effect="dark" content="点击打开/关闭设置" placement="top-start">
                      <el-icon :size="30" style="margin: 0 auto; margin-top: 20px"><Setting /></el-icon>
                    </el-tooltip>
                  </div>
                </el-col>
              </el-row>
            </div>
            <div class="border-b" v-show="item.wzSetting.open">
              <el-row custom-style="margin-bottom: 10px">
                <el-col :span="7">
                  <div class="slider-demo-block p-2 border-r">
                    <div class="text-center">字体大小-{{ item.wzSetting.fontSize }}</div>
                    <el-slider v-model="item.wzSetting.fontSize" :min="12" :max="60" />
                  </div>
                </el-col>
                <el-col :span="9">
                  <div class="slider-demo-block p-2 border-r text-center">
                    <div class="text-center">对齐方式</div>
                    <el-radio-group
                      v-model="item.wzSetting.textAlign.value"
                      size="small"
                      style="margin: 0 auto"
                      @change="(e) => checked1change(index, e)"
                    >
                      <el-radio-button label="左对齐" value="left" />
                      <el-radio-button label="居中" value="center" />
                      <el-radio-button label="右对齐" value="right" />
                    </el-radio-group>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="slider-demo-block p-2 border-r text-center">
                    <div class="text-center">字体颜色</div>
                    <div class="mt-1">
                      <el-color-picker v-model="item.wzSetting.color" size="small" />
                    </div>
                  </div>
                </el-col>
                <el-col :span="4">
                  <div class="slider-demo-block p-2 text-center">
                    <div class="text-center">背景颜色</div>
                    <div class="mt-1">
                      <el-color-picker v-model="item.wzSetting.bgColor" size="small" />
                    </div>
                  </div>
                </el-col>
              </el-row>
            </div>
            <div>
              <el-row custom-style="margin-bottom: 10px">
                <el-col :span="8">
                  <div
                    style="padding: 10px; cursor: pointer; border-right: 1px #ebedf0 solid"
                    @click="swapWithNext(item)"
                  >
                    <el-tooltip class="box-item" effect="dark" content="跟下面模块交换位置" placement="top-start">
                      <img
                        src="https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/ICON%E4%BA%BF%E7%A0%81%E4%BA%92%E8%81%94%E5%9B%BE%E6%A0%87/%E7%BC%96%E8%BE%91%E9%A1%B5/%E4%B8%8B%E7%A7%BB%20.png"
                        mode="scaleToFill"
                        style="width: 15px; height: 15px; margin: 0 auto"
                      />
                    </el-tooltip>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div
                    style="padding: 10px; cursor: pointer; border-right: 1px #ebedf0 solid"
                    @click="swapWithPrevious(item)"
                  >
                    <el-tooltip class="box-item" effect="dark" content="跟上面元素交换位置" placement="top-start">
                      <img
                        src="https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/ICON%E4%BA%BF%E7%A0%81%E4%BA%92%E8%81%94%E5%9B%BE%E6%A0%87/%E7%BC%96%E8%BE%91%E9%A1%B5/%E4%B8%8A%E7%A7%BB%20.png"
                        mode="scaleToFill"
                        style="width: 15px; height: 15px; margin: 0 auto"
                      />
                    </el-tooltip>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div style="padding: 10px; cursor: pointer" @click="removeItem(index)">
                    <el-tooltip class="box-item" effect="dark" content="删除该模块" placement="top-start">
                      <img
                        src="https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/ICON%E4%BA%BF%E7%A0%81%E4%BA%92%E8%81%94%E5%9B%BE%E6%A0%87/%E7%BC%96%E8%BE%91%E9%A1%B5/%E5%88%A0%E9%99%A4.png"
                        mode="scaleToFill"
                        style="width: 15px; height: 15px; margin: 0 auto"
                      />
                    </el-tooltip>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div
            v-if="item.key === '图片'"
            class="border relative"
            style="
              min-height: 90px;
              padding-top: 20px;
              margin: 0 10px;
              margin-top: 15px;
              background-color: #fff;
              border-radius: 5px;
            "
          >
            <div v-if="item.value" class="absolute top-1 right-1" style="z-index: 999">
              <el-button
                type="success"
                @click="
                  selectIndex = index;
                  uploaddialogVisible2 = true;
                  uploadedfile_list();
                "
                >选择已上传文件替换</el-button
              >
            </div>
            <div class="item" style="width: 100%; height: 300px">
              <el-upload
                v-if="item.value"
                action="#"
                :http-request="UploadOssEdit"
                :auto-upload="true"
                :show-file-list="false"
                :accept="accept"
                :on-remove="handleRemove"
                :on-preview="handlePictureCardPreview"
                multiple
                class="up"
                :data="{ index: index }"
                style="display: block !important; width: 100%"
              >
                <div class="text-center">
                  <el-tooltip class="box-item" effect="dark" content="点击更换图片" placement="top-start">
                    <el-image
                      class="img flex justify-center items-center"
                      :src="item.value"
                      style="width: auto; height: 280px; margin: 0 auto; text-align: center"
                    />
                  </el-tooltip>
                </div>
              </el-upload>

              <div
                v-else
                style="width: 100%; height: 300px; background-color: #f0f2f5"
                class="flex justify-center items-center"
              >
                <div>
                  <div class="w-full text-center" style="width: 300px; color: rgb(199.5 201 204)">
                    <el-icon style="margin: 0 auto" color="rgb(199.5, 201, 204)" size="100"><Picture /></el-icon>
                    <el-row>
                      <el-col :span="12">
                        <el-upload
                          action="#"
                          :http-request="UploadOss"
                          :auto-upload="true"
                          :show-file-list="false"
                          :accept="accept"
                          :on-remove="handleRemove"
                          :on-preview="handlePictureCardPreview"
                          multiple
                          class="up"
                          :data="{ index: index }"
                          style="display: block !important; width: 100%"
                        >
                          <span>从电脑端上传</span>
                        </el-upload>
                      </el-col>
                      <el-col :span="12">
                        <span
                          @click="
                            selectIndex = index;
                            uploaddialogVisible2 = true;
                            uploadedfile_list();
                          "
                          >选择已上传文件</span
                        >
                      </el-col>
                    </el-row>
                  </div>
                </div>
              </div>
            </div>
            <div v-if="item.value" style="padding: 20px; background-color: #f0f2f5">
              <el-input v-model="item.title" placeholder="设置图片标题" style="margin-bottom: 10px"></el-input>
              <el-row gutter="10" style="margin-bottom: 10px">
                <el-col :span="20">
                  <el-input v-model="item.linkname" :readonly="true" placeholder="未设置连接"></el-input
                ></el-col>
                <el-col :span="4">
                  <el-button
                    type="primary"
                    icon="setting"
                    @click="
                      uploaddialogVisible3 = true;
                      settinglink(index);
                    "
                    >设置</el-button
                  >
                </el-col>
              </el-row>
              <el-row gutter="10">
                <el-col :span="8">
                  <el-checkbox-group v-model="item.download" @change="imgdownchange">
                    <el-checkbox label="允许下载" size="large" border class="w-full bg-white" />
                  </el-checkbox-group>
                </el-col>
                <el-col :span="8">
                  <el-select v-model="item.mode" placeholder="Select" size="large">
                    <el-option label="留白" value="aspectFit" />
                    <el-option label="撑满" value="widthFix" />
                  </el-select>
                </el-col>
                <el-col :span="8">
                  <el-select
                    v-model="item.grid"
                    placeholder="Select"
                    size="large"
                    @change="selectGridChanged($event, index)"
                  >
                    <el-option label="平铺" value="w-full" />
                    <el-option label="两个一行" value="w-1/2" />
                    <el-option label="三个一行" value="w-1/3" />
                    <el-option label="轮播" value="轮播" />
                  </el-select>
                </el-col>
              </el-row>
            </div>
            <div>
              <el-row custom-style="margin-bottom: 10px">
                <el-col :span="8">
                  <div
                    style="padding: 10px; cursor: pointer; border-right: 1px #ebedf0 solid"
                    @click="swapWithNext(item)"
                  >
                    <el-tooltip class="box-item" effect="dark" content="跟下面模块交换位置" placement="top-start">
                      <img
                        src="https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/ICON%E4%BA%BF%E7%A0%81%E4%BA%92%E8%81%94%E5%9B%BE%E6%A0%87/%E7%BC%96%E8%BE%91%E9%A1%B5/%E4%B8%8B%E7%A7%BB%20.png"
                        mode="scaleToFill"
                        style="width: 15px; height: 15px; margin: 0 auto"
                      />
                    </el-tooltip>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div
                    style="padding: 10px; cursor: pointer; border-right: 1px #ebedf0 solid"
                    @click="swapWithPrevious(item)"
                  >
                    <el-tooltip class="box-item" effect="dark" content="跟上面元素交换位置" placement="top-start">
                      <img
                        src="https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/ICON%E4%BA%BF%E7%A0%81%E4%BA%92%E8%81%94%E5%9B%BE%E6%A0%87/%E7%BC%96%E8%BE%91%E9%A1%B5/%E4%B8%8A%E7%A7%BB%20.png"
                        mode="scaleToFill"
                        style="width: 15px; height: 15px; margin: 0 auto"
                      />
                    </el-tooltip>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div style="padding: 10px; cursor: pointer" @click="removeItem(index)">
                    <el-tooltip class="box-item" effect="dark" content="删除该模块" placement="top-start">
                      <img
                        src="https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/ICON%E4%BA%BF%E7%A0%81%E4%BA%92%E8%81%94%E5%9B%BE%E6%A0%87/%E7%BC%96%E8%BE%91%E9%A1%B5/%E5%88%A0%E9%99%A4.png"
                        mode="scaleToFill"
                        style="width: 15px; height: 15px; margin: 0 auto"
                      />
                    </el-tooltip>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div
            v-if="item.key === '滚动'"
            class="border relative"
            style="
              min-height: 90px;
              padding-top: 20px;
              margin: 0 10px;
              margin-top: 15px;
              background-color: #fff;
              border-radius: 5px;
            "
          >
            <div class="p-2">
              <VueDraggable v-model="list[index].value" animation="150" ghostClass="ghost" group="people2">
                <div class="float-left m-2 p-2 relative" v-for="(o, i) in item.value" :key="i">
                  <el-image :src="o" style="width: 80px; height: 80px; margin: 0 auto; text-align: center" />
                  <div class="absolute top-0 right-0 cursor-pointer" @click="removeItemById2(item, index, i)">
                    <el-icon color="#BD3124"><CircleClose /></el-icon>
                  </div>
                </div>
              </VueDraggable>
              <div style="clear: both"></div>
              <div class="w-full text-center" style="color: rgb(199.5 201 204)">
                <el-row>
                  <el-col :span="12">
                    <el-upload
                      action="#"
                      :http-request="UploadOss"
                      :auto-upload="true"
                      :show-file-list="false"
                      :accept="accept"
                      :on-remove="handleRemove"
                      :on-preview="handlePictureCardPreview"
                      multiple
                      class="up"
                      :data="{ index: index, type: '轮播' }"
                      style="display: block !important; width: 100%"
                    >
                      <span>从电脑端上传</span>
                    </el-upload>
                  </el-col>
                  <el-col :span="12">
                    <span
                      @click="
                        selectIndex = index;
                        uploaddialogVisible2 = true;
                        uploadedfile_list();
                      "
                      >选择已上传文件</span
                    >
                  </el-col>
                </el-row>
                <el-row style="margin: 20px 0">
                  <el-col :span="12">
                    <el-select v-model="item.mode" placeholder="Select" size="large">
                      <el-option label="留白" value="aspectFit" />
                      <el-option label="撑满" value="widthFix" />
                    </el-select>
                  </el-col>
                  <el-col :span="12">
                    <el-button type="primary" @click="pingpu(index)">拆散平铺</el-button>
                  </el-col>
                </el-row>
              </div>
            </div>
            <div>
              <el-row custom-style="margin-bottom: 10px">
                <el-col :span="8">
                  <div
                    style="padding: 10px; cursor: pointer; border-right: 1px #ebedf0 solid"
                    @click="swapWithNext(item)"
                  >
                    <el-tooltip class="box-item" effect="dark" content="跟下面模块交换位置" placement="top-start">
                      <img
                        src="https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/ICON%E4%BA%BF%E7%A0%81%E4%BA%92%E8%81%94%E5%9B%BE%E6%A0%87/%E7%BC%96%E8%BE%91%E9%A1%B5/%E4%B8%8B%E7%A7%BB%20.png"
                        mode="scaleToFill"
                        style="width: 15px; height: 15px; margin: 0 auto"
                      />
                    </el-tooltip>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div
                    style="padding: 10px; cursor: pointer; border-right: 1px #ebedf0 solid"
                    @click="swapWithPrevious(item)"
                  >
                    <el-tooltip class="box-item" effect="dark" content="跟上面元素交换位置" placement="top-start">
                      <img
                        src="https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/ICON%E4%BA%BF%E7%A0%81%E4%BA%92%E8%81%94%E5%9B%BE%E6%A0%87/%E7%BC%96%E8%BE%91%E9%A1%B5/%E4%B8%8A%E7%A7%BB%20.png"
                        mode="scaleToFill"
                        style="width: 15px; height: 15px; margin: 0 auto"
                      />
                    </el-tooltip>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div style="padding: 10px; cursor: pointer" @click="removeItem(index)">
                    <el-tooltip class="box-item" effect="dark" content="删除该模块" placement="top-start">
                      <img
                        src="https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/ICON%E4%BA%BF%E7%A0%81%E4%BA%92%E8%81%94%E5%9B%BE%E6%A0%87/%E7%BC%96%E8%BE%91%E9%A1%B5/%E5%88%A0%E9%99%A4.png"
                        mode="scaleToFill"
                        style="width: 15px; height: 15px; margin: 0 auto"
                      />
                    </el-tooltip>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div
            v-if="item.key === '视频'"
            class="border relative"
            style="
              min-height: 90px;
              padding-top: 20px;
              margin: 0 10px;
              margin-top: 15px;
              background-color: #fff;
              border-radius: 5px;
            "
          >
            <div v-if="item.value" class="absolute top-1 right-1" style="z-index: 999">
              <el-button
                type="success"
                @click="
                  selectIndex = index;
                  uploaddialogVisible2 = true;
                  uploadedfile_list();
                "
                >选择已上传文件替换</el-button
              >
            </div>

            <div class="item relative" style="width: 100%; height: 300px">
              <div v-if="item.fm" class="absolute bottom-1 right-1" style="z-index: 999">
                <el-button type="error" @click="item.fm = ''">清除封面</el-button>
              </div>

              <video
                v-if="item.value"
                :src="item.value"
                :poster="item.fm ? item.fm : ''"
                controls="true"
                style="width: auto; height: 280px; margin: 0 auto; text-align: center"
              />
              <div
                v-else
                style="width: 100%; height: 300px; background-color: #f0f2f5"
                class="flex justify-center items-center"
              >
                <div>
                  <div class="w-full text-center" style="width: 300px; color: rgb(199.5 201 204)">
                    <el-icon style="margin: 0 auto" color="rgb(199.5, 201, 204)" size="100"
                      ><VideoCameraFilled
                    /></el-icon>
                    <el-row>
                      <el-col :span="12">
                        <el-upload
                          action="#"
                          :http-request="UploadOss"
                          :auto-upload="true"
                          :show-file-list="false"
                          :accept="accept"
                          :on-remove="handleRemove"
                          :on-preview="handlePictureCardPreview"
                          multiple
                          class="up"
                          :data="{ index: index }"
                          style="display: block !important; width: 100%"
                        >
                          <span>从电脑端上传</span>
                        </el-upload>
                      </el-col>
                      <el-col :span="12">
                        <span
                          @click="
                            selectIndex = index;
                            uploaddialogVisible2 = true;
                            uploadedfile_list();
                          "
                          >选择已上传文件</span
                        >
                      </el-col>
                    </el-row>
                  </div>
                </div>
              </div>
            </div>
            <div v-if="item.value" style="padding: 20px; background-color: #f0f2f5">
              <el-row gutter="10" style="margin-bottom: 10px">
                <el-col :span="12">
                  <el-upload
                    action="#"
                    :http-request="UploadOssEdit"
                    :auto-upload="true"
                    :show-file-list="false"
                    :accept="accept"
                    :on-remove="handleRemove"
                    :on-preview="handlePictureCardPreview"
                    multiple
                    class="up"
                    :data="{ index: index }"
                    style="display: block !important; width: 100%"
                  >
                    <el-button type="primary" class="w-full">更换视频</el-button>
                  </el-upload>
                </el-col>
                <el-col :span="12">
                  <el-upload
                    action="#"
                    :http-request="UploadOssEdit"
                    :auto-upload="true"
                    :show-file-list="false"
                    :accept="'.png, .jpeg,.gif, .bmp, .webp'"
                    :on-remove="handleRemove"
                    :on-preview="handlePictureCardPreview"
                    multiple
                    class="up"
                    :data="{ index: index, type: '封面' }"
                    style="display: block !important; width: 100%"
                  >
                    <el-button type="primary" class="w-full">添加封面</el-button>
                  </el-upload>
                </el-col>
              </el-row>
              <el-row gutter="10">
                <el-col :span="8">
                  <el-checkbox-group v-model="item.download" @change="imgdownchange">
                    <el-checkbox label="允许下载" size="large" border class="w-full bg-white" />
                  </el-checkbox-group>
                </el-col>
                <el-col :span="8">
                  <el-select v-model="item.mode" placeholder="Select" size="large">
                    <el-option label="正常视频" value="aspect-16_a_9" />
                    <el-option label="竖屏视频" value="aspect-9_a_16" />
                  </el-select>
                </el-col>
                <el-col :span="8">
                  <el-checkbox-group v-model="item.full" @change="imgdownchange">
                    <el-checkbox label="默认全屏" size="large" border class="w-full bg-white" />
                  </el-checkbox-group>
                </el-col>
              </el-row>
            </div>
            <div>
              <el-row custom-style="margin-bottom: 10px">
                <el-col :span="8">
                  <div
                    style="padding: 10px; cursor: pointer; border-right: 1px #ebedf0 solid"
                    @click="swapWithNext(item)"
                  >
                    <el-tooltip class="box-item" effect="dark" content="跟下面模块交换位置" placement="top-start">
                      <img
                        src="https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/ICON%E4%BA%BF%E7%A0%81%E4%BA%92%E8%81%94%E5%9B%BE%E6%A0%87/%E7%BC%96%E8%BE%91%E9%A1%B5/%E4%B8%8B%E7%A7%BB%20.png"
                        mode="scaleToFill"
                        style="width: 15px; height: 15px; margin: 0 auto"
                      />
                    </el-tooltip>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div
                    style="padding: 10px; cursor: pointer; border-right: 1px #ebedf0 solid"
                    @click="swapWithPrevious(item)"
                  >
                    <el-tooltip class="box-item" effect="dark" content="跟上面元素交换位置" placement="top-start">
                      <img
                        src="https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/ICON%E4%BA%BF%E7%A0%81%E4%BA%92%E8%81%94%E5%9B%BE%E6%A0%87/%E7%BC%96%E8%BE%91%E9%A1%B5/%E4%B8%8A%E7%A7%BB%20.png"
                        mode="scaleToFill"
                        style="width: 15px; height: 15px; margin: 0 auto"
                      />
                    </el-tooltip>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div style="padding: 10px; cursor: pointer" @click="removeItem(index)">
                    <el-tooltip class="box-item" effect="dark" content="删除该模块" placement="top-start">
                      <img
                        src="https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/ICON%E4%BA%BF%E7%A0%81%E4%BA%92%E8%81%94%E5%9B%BE%E6%A0%87/%E7%BC%96%E8%BE%91%E9%A1%B5/%E5%88%A0%E9%99%A4.png"
                        mode="scaleToFill"
                        style="width: 15px; height: 15px; margin: 0 auto"
                      />
                    </el-tooltip>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div
            v-if="item.key === '音频'"
            class="border relative"
            style="
              min-height: 90px;
              padding-top: 20px;
              margin: 0 10px;
              margin-top: 15px;
              background-color: #fff;
              border-radius: 5px;
            "
          >
            <div v-if="item.value" class="absolute top-1 right-1" style="z-index: 999">
              <el-button
                type="success"
                @click="
                  selectIndex = index;
                  uploaddialogVisible2 = true;
                  uploadedfile_list();
                "
                >选择已上传文件替换</el-button
              >
            </div>

            <div class="item relative" style="width: 100%; height: 200px">
              <!-- <el-upload
                v-if="item.value"
                action="#"
                :http-request="UploadOssEdit"
                :auto-upload="true"
                :show-file-list="false"
                :accept="accept"
                :on-remove="handleRemove"
                :on-preview="handlePictureCardPreview"
                multiple
                class="up"
                :data="{ index: index }"
                style="display: block !important; width: 100%"
              >
                <div class="text-center">
                  <el-tooltip class="box-item" effect="dark" content="点击更换图片" placement="top-start">
                    <el-image
                      class="img flex justify-center items-center"
                      :src="item.value"
                      style="width: auto; height: 280px; margin: 0 auto; text-align: center"
                    />
                  </el-tooltip>
                </div>
              </el-upload> -->
              <audio
                v-if="item.value"
                :src="item.value"
                controls="true"
                style="width: 280px; height: 80px; margin: 0 auto; text-align: center"
              />
              <div
                v-else
                style="width: 100%; height: 200px; background-color: #f0f2f5"
                class="flex justify-center items-center"
              >
                <div>
                  <div class="w-full text-center" style="width: 300px; color: rgb(199.5 201 204)">
                    <el-icon style="margin: 0 auto" color="rgb(199.5, 201, 204)" size="100"><Mic /></el-icon>
                    <el-row>
                      <el-col :span="12">
                        <el-upload
                          action="#"
                          :http-request="UploadOss"
                          :auto-upload="true"
                          :show-file-list="false"
                          :accept="accept"
                          :on-remove="handleRemove"
                          :on-preview="handlePictureCardPreview"
                          multiple
                          class="up"
                          :data="{ index: index }"
                          style="display: block !important; width: 100%"
                        >
                          <span>从电脑端上传</span>
                        </el-upload>
                      </el-col>
                      <el-col :span="12">
                        <span
                          @click="
                            selectIndex = index;
                            uploaddialogVisible2 = true;
                            uploadedfile_list();
                          "
                          >选择已上传文件</span
                        >
                      </el-col>
                    </el-row>
                  </div>
                </div>
              </div>
            </div>
            <div v-if="item.value" style="padding: 20px; background-color: #f0f2f5">
              <el-upload
                action="#"
                :http-request="UploadOssEdit"
                :auto-upload="true"
                :show-file-list="false"
                :accept="accept"
                :on-remove="handleRemove"
                :on-preview="handlePictureCardPreview"
                multiple
                class="up"
                :data="{ index: index }"
                style="display: block !important; width: 100%"
              >
                <el-button type="primary" class="w-full">更换音频</el-button>
              </el-upload>
            </div>
            <div>
              <el-row custom-style="margin-bottom: 10px">
                <el-col :span="8">
                  <div
                    style="padding: 10px; cursor: pointer; border-right: 1px #ebedf0 solid"
                    @click="swapWithNext(item)"
                  >
                    <el-tooltip class="box-item" effect="dark" content="跟下面模块交换位置" placement="top-start">
                      <img
                        src="https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/ICON%E4%BA%BF%E7%A0%81%E4%BA%92%E8%81%94%E5%9B%BE%E6%A0%87/%E7%BC%96%E8%BE%91%E9%A1%B5/%E4%B8%8B%E7%A7%BB%20.png"
                        mode="scaleToFill"
                        style="width: 15px; height: 15px; margin: 0 auto"
                      />
                    </el-tooltip>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div
                    style="padding: 10px; cursor: pointer; border-right: 1px #ebedf0 solid"
                    @click="swapWithPrevious(item)"
                  >
                    <el-tooltip class="box-item" effect="dark" content="跟上面元素交换位置" placement="top-start">
                      <img
                        src="https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/ICON%E4%BA%BF%E7%A0%81%E4%BA%92%E8%81%94%E5%9B%BE%E6%A0%87/%E7%BC%96%E8%BE%91%E9%A1%B5/%E4%B8%8A%E7%A7%BB%20.png"
                        mode="scaleToFill"
                        style="width: 15px; height: 15px; margin: 0 auto"
                      />
                    </el-tooltip>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div style="padding: 10px; cursor: pointer" @click="removeItem(index)">
                    <el-tooltip class="box-item" effect="dark" content="删除该模块" placement="top-start">
                      <img
                        src="https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/ICON%E4%BA%BF%E7%A0%81%E4%BA%92%E8%81%94%E5%9B%BE%E6%A0%87/%E7%BC%96%E8%BE%91%E9%A1%B5/%E5%88%A0%E9%99%A4.png"
                        mode="scaleToFill"
                        style="width: 15px; height: 15px; margin: 0 auto"
                      />
                    </el-tooltip>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div
            v-if="item.key === '文件'"
            class="border relative"
            style="
              min-height: 90px;
              padding-top: 20px;
              margin: 0 10px;
              margin-top: 15px;
              background-color: #fff;
              border-radius: 5px;
            "
          >
            <div v-if="item.value" class="absolute top-1 right-1" style="z-index: 999">
              <el-button
                type="success"
                @click="
                  selectIndex = index;
                  uploaddialogVisible2 = true;
                  uploadedfile_list();
                "
                >选择已上传文件替换</el-button
              >
            </div>

            <div class="item relative" style="width: 100%; height: 200px">
              <div v-if="item.value" style="margin: 0 auto; text-align: center" class="w-full">
                <img :src="returnOfficeIcon(item.value)" class="w-20 h-20" style="margin: 0 auto" />
                <div class="mt-4">{{ decodeURIComponent(item.value.split('/').pop()) }}</div>
                <div class="mt-4 text-red-400">{{ item.size }}</div>
              </div>
              <div
                v-else
                style="width: 100%; height: 200px; background-color: #f0f2f5"
                class="flex justify-center items-center"
              >
                <div>
                  <div class="w-full text-center" style="width: 300px; color: rgb(199.5 201 204)">
                    <el-icon style="margin: 0 auto" color="rgb(199.5, 201, 204)" size="100"><Document /></el-icon>
                    <el-row>
                      <el-col :span="12">
                        <el-upload
                          action="#"
                          :http-request="UploadOss"
                          :auto-upload="true"
                          :show-file-list="false"
                          :accept="accept"
                          :on-remove="handleRemove"
                          :on-preview="handlePictureCardPreview"
                          multiple
                          class="up"
                          :data="{ index: index }"
                          style="display: block !important; width: 100%"
                        >
                          <span>从电脑端上传</span>
                        </el-upload>
                      </el-col>
                      <el-col :span="12">
                        <span
                          @click="
                            selectIndex = index;
                            uploaddialogVisible2 = true;
                            uploadedfile_list();
                          "
                          >选择已上传文件</span
                        >
                      </el-col>
                    </el-row>
                  </div>
                </div>
              </div>
            </div>
            <div v-if="item.value" style="padding: 20px; background-color: #f0f2f5">
              <el-row gutter="10">
                <el-col :span="8">
                  <el-checkbox-group v-model="item.download" @change="imgdownchange">
                    <el-checkbox label="允许下载" size="large" border class="w-full bg-white" />
                  </el-checkbox-group>
                </el-col>
                <el-col :span="8">
                  <el-upload
                    action="#"
                    :http-request="UploadOssEdit"
                    :auto-upload="true"
                    :show-file-list="false"
                    :accept="accept"
                    :on-remove="handleRemove"
                    :on-preview="handlePictureCardPreview"
                    multiple
                    class="up"
                    :data="{ index: index }"
                    style="display: block !important; width: 100%"
                  >
                    <el-button type="primary" class="w-full">更换文件</el-button>
                  </el-upload>
                </el-col>
                <el-col :span="8">
                  <el-button
                    type="primary"
                    class="w-full"
                    @click="
                      selectIndex = index;
                      filelist(item, index);
                    "
                    >文件列表</el-button
                  >
                </el-col>
              </el-row>
            </div>
            <div>
              <el-row custom-style="margin-bottom: 10px">
                <el-col :span="8">
                  <div
                    style="padding: 10px; cursor: pointer; border-right: 1px #ebedf0 solid"
                    @click="swapWithNext(item)"
                  >
                    <el-tooltip class="box-item" effect="dark" content="跟下面模块交换位置" placement="top-start">
                      <img
                        src="https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/ICON%E4%BA%BF%E7%A0%81%E4%BA%92%E8%81%94%E5%9B%BE%E6%A0%87/%E7%BC%96%E8%BE%91%E9%A1%B5/%E4%B8%8B%E7%A7%BB%20.png"
                        mode="scaleToFill"
                        style="width: 15px; height: 15px; margin: 0 auto"
                      />
                    </el-tooltip>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div
                    style="padding: 10px; cursor: pointer; border-right: 1px #ebedf0 solid"
                    @click="swapWithPrevious(item)"
                  >
                    <el-tooltip class="box-item" effect="dark" content="跟上面元素交换位置" placement="top-start">
                      <img
                        src="https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/ICON%E4%BA%BF%E7%A0%81%E4%BA%92%E8%81%94%E5%9B%BE%E6%A0%87/%E7%BC%96%E8%BE%91%E9%A1%B5/%E4%B8%8A%E7%A7%BB%20.png"
                        mode="scaleToFill"
                        style="width: 15px; height: 15px; margin: 0 auto"
                      />
                    </el-tooltip>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div style="padding: 10px; cursor: pointer" @click="removeItem(index)">
                    <el-tooltip class="box-item" effect="dark" content="删除该模块" placement="top-start">
                      <img
                        src="https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/ICON%E4%BA%BF%E7%A0%81%E4%BA%92%E8%81%94%E5%9B%BE%E6%A0%87/%E7%BC%96%E8%BE%91%E9%A1%B5/%E5%88%A0%E9%99%A4.png"
                        mode="scaleToFill"
                        style="width: 15px; height: 15px; margin: 0 auto"
                      />
                    </el-tooltip>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div
            v-if="item.key === '文件列表'"
            class="border relative"
            style="
              min-height: 90px;
              padding-top: 20px;
              margin: 0 10px;
              margin-top: 15px;
              background-color: #fff;
              border-radius: 5px;
            "
          >
            <div class="absolute top-1 right-1" style="z-index: 999">
              <el-button
                type="success"
                @click="
                  selectIndex = index;
                  uploaddialogVisible2 = true;
                  uploadedfile_list();
                "
                >选择已上传文件添加</el-button
              >
            </div>

            <div class="item relative p-4" style="width: 100%; height: 200px; overflow-y: scroll">
              <div
                v-for="(o, i) in item.value"
                :key="i"
                class="border flex justify-start items-center p-2 w-135 relative"
              >
                <div class="float-left">
                  <img :src="returnOfficeIcon(o.value)" class="w-10 h-10" style="margin: 0 auto" />
                </div>
                <div class="float-left ml-4">{{ decodeURIComponent(o.value.split('/').pop()) }}</div>

                <div class="cursor-pointer absolute top-4 right-2" @click="removeItemById2(item, index, i)">
                  <el-icon color="#BD3124"><CircleClose /></el-icon>
                </div>
              </div>
              <div style="clear: both"></div>
            </div>
            <div style="padding: 20px; background-color: #f0f2f5">
              <el-row gutter="10">
                <el-col :span="12">
                  <el-checkbox-group v-model="item.download" @change="imgdownchange">
                    <el-checkbox label="允许下载" size="large" border class="w-full bg-white" />
                  </el-checkbox-group>
                </el-col>
                <el-col :span="12">
                  <el-upload
                    action="#"
                    :http-request="UploadOssEdit"
                    :auto-upload="true"
                    :show-file-list="false"
                    :accept="accept"
                    :on-remove="handleRemove"
                    :on-preview="handlePictureCardPreview"
                    multiple
                    class="up"
                    :data="{ index: index }"
                    style="display: block !important; width: 100%"
                  >
                    <el-button type="primary" class="w-full">添加文件</el-button>
                  </el-upload>
                </el-col>
              </el-row>
            </div>
            <div>
              <el-row custom-style="margin-bottom: 10px">
                <el-col :span="8">
                  <div
                    style="padding: 10px; cursor: pointer; border-right: 1px #ebedf0 solid"
                    @click="swapWithNext(item)"
                  >
                    <el-tooltip class="box-item" effect="dark" content="跟下面模块交换位置" placement="top-start">
                      <img
                        src="https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/ICON%E4%BA%BF%E7%A0%81%E4%BA%92%E8%81%94%E5%9B%BE%E6%A0%87/%E7%BC%96%E8%BE%91%E9%A1%B5/%E4%B8%8B%E7%A7%BB%20.png"
                        mode="scaleToFill"
                        style="width: 15px; height: 15px; margin: 0 auto"
                      />
                    </el-tooltip>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div
                    style="padding: 10px; cursor: pointer; border-right: 1px #ebedf0 solid"
                    @click="swapWithPrevious(item)"
                  >
                    <el-tooltip class="box-item" effect="dark" content="跟上面元素交换位置" placement="top-start">
                      <img
                        src="https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/ICON%E4%BA%BF%E7%A0%81%E4%BA%92%E8%81%94%E5%9B%BE%E6%A0%87/%E7%BC%96%E8%BE%91%E9%A1%B5/%E4%B8%8A%E7%A7%BB%20.png"
                        mode="scaleToFill"
                        style="width: 15px; height: 15px; margin: 0 auto"
                      />
                    </el-tooltip>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div style="padding: 10px; cursor: pointer" @click="removeItem(index)">
                    <el-tooltip class="box-item" effect="dark" content="删除该模块" placement="top-start">
                      <img
                        src="https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/ICON%E4%BA%BF%E7%A0%81%E4%BA%92%E8%81%94%E5%9B%BE%E6%A0%87/%E7%BC%96%E8%BE%91%E9%A1%B5/%E5%88%A0%E9%99%A4.png"
                        mode="scaleToFill"
                        style="width: 15px; height: 15px; margin: 0 auto"
                      />
                    </el-tooltip>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div
            v-if="item.key === '连接'"
            class="border relative"
            style="
              min-height: 90px;
              padding-top: 20px;
              margin: 0 10px;
              margin-top: 15px;
              background-color: #fff;
              border-radius: 5px;
            "
          >
            <div class="item relative p-4" style="width: 100%; height: 140px; overflow-y: scroll">
              <el-input v-model="item.name" placeholder="请输入按钮文字" style="height: 40px"></el-input>
              <el-input
                v-model="item.linkname"
                :readonly="true"
                placeholder="未设置连接"
                style="height: 40px; margin-top: 20px; margin-bottom: 20px"
              >
                <template #append>
                  <el-button
                    type="primary"
                    icon="setting"
                    @click="
                      uploaddialogVisible3 = true;
                      settinglink(index);
                    "
                    >设置</el-button
                  >
                </template>
              </el-input>
            </div>

            <div>
              <el-row custom-style="margin-bottom: 10px">
                <el-col :span="8">
                  <div
                    style="padding: 10px; cursor: pointer; border-right: 1px #ebedf0 solid"
                    @click="swapWithNext(item)"
                  >
                    <el-tooltip class="box-item" effect="dark" content="跟下面模块交换位置" placement="top-start">
                      <img
                        src="https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/ICON%E4%BA%BF%E7%A0%81%E4%BA%92%E8%81%94%E5%9B%BE%E6%A0%87/%E7%BC%96%E8%BE%91%E9%A1%B5/%E4%B8%8B%E7%A7%BB%20.png"
                        mode="scaleToFill"
                        style="width: 15px; height: 15px; margin: 0 auto"
                      />
                    </el-tooltip>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div
                    style="padding: 10px; cursor: pointer; border-right: 1px #ebedf0 solid"
                    @click="swapWithPrevious(item)"
                  >
                    <el-tooltip class="box-item" effect="dark" content="跟上面元素交换位置" placement="top-start">
                      <img
                        src="https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/ICON%E4%BA%BF%E7%A0%81%E4%BA%92%E8%81%94%E5%9B%BE%E6%A0%87/%E7%BC%96%E8%BE%91%E9%A1%B5/%E4%B8%8A%E7%A7%BB%20.png"
                        mode="scaleToFill"
                        style="width: 15px; height: 15px; margin: 0 auto"
                      />
                    </el-tooltip>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div style="padding: 10px; cursor: pointer" @click="removeItem(index)">
                    <el-tooltip class="box-item" effect="dark" content="删除该模块" placement="top-start">
                      <img
                        src="https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/ICON%E4%BA%BF%E7%A0%81%E4%BA%92%E8%81%94%E5%9B%BE%E6%A0%87/%E7%BC%96%E8%BE%91%E9%A1%B5/%E5%88%A0%E9%99%A4.png"
                        mode="scaleToFill"
                        style="width: 15px; height: 15px; margin: 0 auto"
                      />
                    </el-tooltip>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div
            v-if="item.key === '信息'"
            class="border relative"
            style="
              min-height: 90px;
              padding-top: 20px;
              margin: 0 10px;
              margin-top: 15px;
              background-color: #fff;
              border-radius: 5px;
            "
          >
            <div class="item relative p-4" style="width: 100%; overflow-y: scroll">
              <div
                v-for="(o, i) in item.value"
                :key="i"
                class="border flex justify-start items-center p-2 w-135 relative"
              >
                <div class="float-left">
                  <!-- <img :src="returnOfficeIcon(o)" class="w-10 h-10" style="margin: 0 auto" /> -->

                  <el-input v-model="o.text" placeholder="" style="width: 100px"></el-input>
                </div>
                <div class="float-left ml-4">
                  <el-input v-model="o.value" placeholder="" style="width: 300px"></el-input>
                </div>

                <div
                  v-if="i != 0"
                  class="cursor-pointer absolute top-4 right-2"
                  @click="removeItemById2(item, index, i)"
                >
                  <el-icon color="#BD3124"><CircleClose /></el-icon>
                </div>
              </div>
              <div style="clear: both"></div>
              <div style="margin-top: 20px; text-align: center">
                <el-button-group class="ml-4">
                  <el-button
                    type="primary"
                    @click="
                      selectIndex = index;
                      addinfolist('电话');
                    "
                    >添加电话</el-button
                  >
                  <el-button
                    type="primary"
                    @click="
                      selectIndex = index;
                      addinfolist('邮箱');
                    "
                    >添加邮箱</el-button
                  >
                  <el-button
                    type="primary"
                    @click="
                      selectIndex = index;
                      addinfolist('文本');
                    "
                    >添加文本</el-button
                  >
                </el-button-group>
              </div>
            </div>

            <div>
              <el-row custom-style="margin-bottom: 10px">
                <el-col :span="8">
                  <div
                    style="padding: 10px; cursor: pointer; border-right: 1px #ebedf0 solid"
                    @click="swapWithNext(item)"
                  >
                    <el-tooltip class="box-item" effect="dark" content="跟下面模块交换位置" placement="top-start">
                      <img
                        src="https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/ICON%E4%BA%BF%E7%A0%81%E4%BA%92%E8%81%94%E5%9B%BE%E6%A0%87/%E7%BC%96%E8%BE%91%E9%A1%B5/%E4%B8%8B%E7%A7%BB%20.png"
                        mode="scaleToFill"
                        style="width: 15px; height: 15px; margin: 0 auto"
                      />
                    </el-tooltip>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div
                    style="padding: 10px; cursor: pointer; border-right: 1px #ebedf0 solid"
                    @click="swapWithPrevious(item)"
                  >
                    <el-tooltip class="box-item" effect="dark" content="跟上面元素交换位置" placement="top-start">
                      <img
                        src="https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/ICON%E4%BA%BF%E7%A0%81%E4%BA%92%E8%81%94%E5%9B%BE%E6%A0%87/%E7%BC%96%E8%BE%91%E9%A1%B5/%E4%B8%8A%E7%A7%BB%20.png"
                        mode="scaleToFill"
                        style="width: 15px; height: 15px; margin: 0 auto"
                      />
                    </el-tooltip>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div style="padding: 10px; cursor: pointer" @click="removeItem(index)">
                    <el-tooltip class="box-item" effect="dark" content="删除该模块" placement="top-start">
                      <img
                        src="https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/ICON%E4%BA%BF%E7%A0%81%E4%BA%92%E8%81%94%E5%9B%BE%E6%A0%87/%E7%BC%96%E8%BE%91%E9%A1%B5/%E5%88%A0%E9%99%A4.png"
                        mode="scaleToFill"
                        style="width: 15px; height: 15px; margin: 0 auto"
                      />
                    </el-tooltip>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div
            v-if="item.key === '地图'"
            class="border relative"
            style="
              min-height: 90px;
              padding-top: 20px;
              margin: 0 10px;
              margin-top: 15px;
              background-color: #fff;
              border-radius: 5px;
            "
          >
            <div class="item relative p-4" style="width: 100%; height: 100px; overflow-y: scroll">
              <el-input
                v-model="item.name"
                :readonly="true"
                placeholder="未设置位置"
                style="height: 40px; margin-bottom: 20px"
              >
                <template #append>
                  <el-button
                    type="primary"
                    icon="setting"
                    @click="
                      selectIndex = index;
                      openMap();
                    "
                    >设置</el-button
                  >
                </template>
              </el-input>
            </div>

            <div>
              <el-row custom-style="margin-bottom: 10px">
                <el-col :span="8">
                  <div
                    style="padding: 10px; cursor: pointer; border-right: 1px #ebedf0 solid"
                    @click="swapWithNext(item)"
                  >
                    <el-tooltip class="box-item" effect="dark" content="跟下面模块交换位置" placement="top-start">
                      <img
                        src="https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/ICON%E4%BA%BF%E7%A0%81%E4%BA%92%E8%81%94%E5%9B%BE%E6%A0%87/%E7%BC%96%E8%BE%91%E9%A1%B5/%E4%B8%8B%E7%A7%BB%20.png"
                        mode="scaleToFill"
                        style="width: 15px; height: 15px; margin: 0 auto"
                      />
                    </el-tooltip>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div
                    style="padding: 10px; cursor: pointer; border-right: 1px #ebedf0 solid"
                    @click="swapWithPrevious(item)"
                  >
                    <el-tooltip class="box-item" effect="dark" content="跟上面元素交换位置" placement="top-start">
                      <img
                        src="https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/ICON%E4%BA%BF%E7%A0%81%E4%BA%92%E8%81%94%E5%9B%BE%E6%A0%87/%E7%BC%96%E8%BE%91%E9%A1%B5/%E4%B8%8A%E7%A7%BB%20.png"
                        mode="scaleToFill"
                        style="width: 15px; height: 15px; margin: 0 auto"
                      />
                    </el-tooltip>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div style="padding: 10px; cursor: pointer" @click="removeItem(index)">
                    <el-tooltip class="box-item" effect="dark" content="删除该模块" placement="top-start">
                      <img
                        src="https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/ICON%E4%BA%BF%E7%A0%81%E4%BA%92%E8%81%94%E5%9B%BE%E6%A0%87/%E7%BC%96%E8%BE%91%E9%A1%B5/%E5%88%A0%E9%99%A4.png"
                        mode="scaleToFill"
                        style="width: 15px; height: 15px; margin: 0 auto"
                      />
                    </el-tooltip>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div
            class="border relative"
            v-if="item.key === '基础表单' || item.key === '多媒体类' || item.key === '个人信息'"
            style="
              display: block;
              min-height: 90px;
              padding-top: 20px;
              margin: 0 10px;
              margin-top: 15px;
              background-color: #fff;
              border-radius: 5px;
            "
          >
            <div style="position: relative; width: 100%; height: 100%">
              <div class="float-left p-2">
                <div
                  v-if="item.item.title !== '名片'"
                  class="onerow"
                  style="
                    padding: 10px;
                    padding-bottom: 0;
                    font-size: 14px;
                    font-weight: bold;
                    color: rgb(51 51 51 / 100%);
                    text-align: left;
                  "
                >
                  {{ item.item.name
                  }}<text v-if="containsRequired(item.item.setting, '必填')" class="text-red-500"> * </text>
                </div>
                <div
                  v-else
                  class="onerow"
                  style="
                    padding: 10px;
                    padding-bottom: 0;
                    margin-top: 5px;
                    font-weight: bold;
                    color: rgb(51 51 51 / 100%);
                    text-align: left;
                  "
                >
                  {{ item.item.value.name }}的电子名片
                </div>
                <div
                  class="onerow"
                  style="width: 100%; padding: 10px; font-size: 12px; color: rgb(51 51 51 / 50%); text-align: left"
                >
                  {{ item.item.instruction }}
                </div>
              </div>

              <div class="absolute top-4 right-4" @click="openEdit(index)">
                <el-icon size="24"><Setting /></el-icon>
              </div>
              <div style="clear: both"></div>
            </div>
            <div>
              <el-row custom-style="margin-bottom: 10px">
                <el-col :span="8">
                  <div
                    style="padding: 10px; cursor: pointer; border-right: 1px #ebedf0 solid"
                    @click="swapWithNext(item)"
                  >
                    <el-tooltip class="box-item" effect="dark" content="跟下面模块交换位置" placement="top-start">
                      <img
                        src="https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/ICON%E4%BA%BF%E7%A0%81%E4%BA%92%E8%81%94%E5%9B%BE%E6%A0%87/%E7%BC%96%E8%BE%91%E9%A1%B5/%E4%B8%8B%E7%A7%BB%20.png"
                        mode="scaleToFill"
                        style="width: 15px; height: 15px; margin: 0 auto"
                      />
                    </el-tooltip>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div
                    style="padding: 10px; cursor: pointer; border-right: 1px #ebedf0 solid"
                    @click="swapWithPrevious(item)"
                  >
                    <el-tooltip class="box-item" effect="dark" content="跟上面元素交换位置" placement="top-start">
                      <img
                        src="https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/ICON%E4%BA%BF%E7%A0%81%E4%BA%92%E8%81%94%E5%9B%BE%E6%A0%87/%E7%BC%96%E8%BE%91%E9%A1%B5/%E4%B8%8A%E7%A7%BB%20.png"
                        mode="scaleToFill"
                        style="width: 15px; height: 15px; margin: 0 auto"
                      />
                    </el-tooltip>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div style="padding: 10px; cursor: pointer" @click="removeItem(index)">
                    <el-tooltip class="box-item" effect="dark" content="删除该模块" placement="top-start">
                      <img
                        src="https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/ICON%E4%BA%BF%E7%A0%81%E4%BA%92%E8%81%94%E5%9B%BE%E6%A0%87/%E7%BC%96%E8%BE%91%E9%A1%B5/%E5%88%A0%E9%99%A4.png"
                        mode="scaleToFill"
                        style="width: 15px; height: 15px; margin: 0 auto"
                      />
                    </el-tooltip>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="right-code-box">
      <img
        :src="rimg"
        class="qrcode"
        style="width: 200px; height: 200px; margin: 0 auto; margin-top: 40px; margin-bottom: 40px"
      />
      <div class="p-2">
        <el-input v-model="setting.pass" prefix-icon="lock" placeholder="访问密码，4-20位数字访问密码"></el-input>
      </div>
      <div class="p-2">
        <el-date-picker
          v-model="setting.imitedPeriod_start"
          style="width: 100%"
          type="datetime"
          placeholder="选择开始时间"
        />
      </div>
      <div class="p-2">
        <el-date-picker
          v-model="setting.limitedPeriod_end"
          style="width: 100%"
          type="datetime"
          placeholder="选择结束时间"
        />
      </div>

      <div class="text-center mt-8">
        <el-button-group>
          <el-button
            type="primary"
            @click="
              value5 = true;
              dialogOverflowVisible2 = true;
            "
            >预览二维码</el-button
          >
          <el-button type="primary" @click="save()">生成二维码</el-button>
        </el-button-group>
      </div>
    </div>
    <div class="left-code-box" v-show="openform">
      <div v-for="(form, index) in formlist" :key="index" class="p-4">
        <div class="title title1">
          {{ form.title }}
        </div>
        <div class="mt-4">
          <el-row>
            <el-col :span="6" v-for="(item, i) in form.items" :key="i">
              <div class="p-2 formitem" custom-style="padding:20rpx" @click="click(index, item)">
                <img :src="item.img2" mode="aspectFit" style="width: 35px; height: 35px; margin: 0 auto" />
                <div class="mt-2 w-full text-center" style="font-size: 14px">
                  {{ item.title }}
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
  <el-dialog v-model="uploaddialogVisible" title="Tips" width="800">
    <upload :filetype="type" @updateMessage="updateMessage" />
  </el-dialog>
  <el-dialog v-model="uploaddialogVisible2" title="已上传文件" width="800">
    <div style="height: 600px; overflow-y: scroll">
      <el-row :gutter="20">
        <el-col :span="6" v-for="(item, index) in historylist" :key="index" style="margin-bottom: 20px">
          <el-card class="image-card" :class="{ selected: selected.includes(item.fileId) }" @click="toggleSelect(item)">
            <div v-if="type == '图片'">
              <img :src="item.fileUrl" alt="Image" class="image" />
              <div class="text-center" style="font-size: 12px">
                {{ decodeURIComponent(item.fileUrl.split('/').pop()) }}
              </div>
            </div>
            <div v-if="type == '视频'">
              <video :src="item.fileUrl" controls alt="Image" class="image" />
              <div class="text-center" style="font-size: 12px">
                {{ decodeURIComponent(item.fileUrl.split('/').pop()) }}
              </div>
            </div>
            <div v-if="type == '音频'">
              <audio :src="item.fileUrl" controls alt="Image" class="image" />
              <div class="text-center" style="font-size: 12px">
                {{ decodeURIComponent(item.fileUrl.split('/').pop()) }}
              </div>
            </div>
            <div v-if="type == '文件'">
              <img :src="returnOfficeIcon(item.fileUrl)" />
              <div class="text-center" style="font-size: 12px">
                {{ decodeURIComponent(item.fileUrl.split('/').pop()) }}
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <template #footer> <el-button type="primary" @click="confirmSelection">确定</el-button></template>
  </el-dialog>
  <el-dialog v-model="uploaddialogVisible3" title="" width="400">
    <div>
      <el-input v-model="url" placeholder="请输入连接">
        <template #append>
          <el-button
            type="primary"
            @click="
              setlink();
              uploaddialogVisible3 = false;
            "
            >保存</el-button
          >
        </template>
      </el-input>
    </div>
    <el-divider> or </el-divider>
    <div style="height: 400px; overflow-y: scroll">
      <div
        class="border my-2 p-2"
        v-for="(item, index) in linklist"
        :key="index"
        :class="{ selected2: selectlinkindex === index }"
        @click="
          selectlinkindex = index;
          setlink2(item);
          uploaddialogVisible3 = false;
        "
      >
        <div style="font-weight: bold">{{ item.eqTitle }}</div>
        <div style="font-size: 12px; color: #666">{{ item.eqCreatedTime }}</div>
      </div>
    </div>
  </el-dialog>
  <div
    v-show="dialogOverflowVisible"
    style="
      position: fixed;
      top: 126px;
      left: 0;
      z-index: 9;
      width: 280px;
      height: 600px;
      max-height: calc(100vh - 140px);
      overflow: hidden;
      background: #fff;
    "
  >
    <div style="height: 600px; overflow: scroll">
      <pre>{{ JSON.stringify(list, null, 4) }}</pre>
    </div>
  </div>
  <el-dialog v-model="mapdialogVisible" title="" width="400">
    <iframe
      id="mapPage"
      width="100%"
      height="800px"
      frameborder="0"
      src="https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=6FNBZ-W3FKU-IOYVP-47WQW-UFSH2-4CBSI&referer=myapp"
    ></iframe>
  </el-dialog>
  <el-dialog v-model="formdialogVisible" title="" width="400">
    <FormEdit :index="selectIndex" :itemstr="itemstr" :list="list" @returndata="returnData2"> </FormEdit>
  </el-dialog>
  <el-dialog v-model="carddialogVisible" title="" width="400">
    <div>
      <div>
        <div>
          <div class="p-4">请选择一个名片引用</div>
        </div>
        <!-- <uv-list-item
          v-for="(item, index) in cardlist"
          :key="index"
          :title="item.uNickname"
          :note="item.phone"
          :thumb="item.uAvatar"
          thumb-size="lg"
          :right-text="item.eqCreatedTime"
          :clickable="true"
          @click="openitem(item)"
        >
        </uv-list-item> -->
        <div
          class="border flex justify-start items-center p-2 m-2 carditem"
          v-for="(item, index) in cardlist"
          :key="index"
          @click="selectcard(item)"
        >
          <div class="float-left">
            <img :src="item.uAvatar" mode="aspectFit" style="width: 40px; height: 40px; margin: 0 auto" />
          </div>
          <div class="float-left ml-4">
            <div style="font-weight: bold">{{ item.eqTitle }}</div>
            <div style="font-size: 12px; color: #666">{{ item.eqCreatedTime }}</div>
          </div>
          <div style="clear: both"></div>
        </div>
      </div>
    </div>
  </el-dialog>
  <el-dialog class="no-header-dialog" v-model="perviewdialogVisible" title="二维码预览" width="400">
    <div class="relative" style="height: 720px">
      <div class="absolute top-0 right-0 cursor-pointer" @click="perviewdialogVisible = false">
        <el-icon color="#fff" size="20"><CircleClose /></el-icon>
      </div>
      <perview :list="list" :title="title" />
      <div style="clear: both"></div>
    </div>
  </el-dialog>
  <div class="summary-dlg">
    <el-dialog
      v-model="dialogOverflowVisible2"
      title="实时预览"
      width="500"
      draggable
      :modal="false"
      :lock-scroll="false"
      :close-on-click-modal="false"
      modal-class="modal-wrap"
      class="dialog-wrap"
      overflow
      @closed="value5 = false"
    >
      <div style="height: 700px; background-color: #f7f7f7">
        <perview :list="list" :title="title" />
        <div style="clear: both"></div>
      </div>
    </el-dialog>
    <!-- <div
      style="
        position: fixed;
        top: 50%;
        left: -22px;
        width: 64px;
        height: 64px;
        cursor: pointer;
        transform: translateY(-50%);
      "
    >
      <svg
        t="1732001350764"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="12117"
        width="64"
        height="64"
      >
        <path
          d="M433.507611 903.263626v27.574288l144.683829-44.082801c18.839409-3.918693 29.388202-13.156607 29.388202-29.388202v-668.687938c0-16.230599-11.039875-25.372887-29.388202-29.388203l-144.800374-44.082801v29.394179l0.116545 758.661478z m46.180607-427.349665l81.594272 47.107985-81.594272 47.10898v-94.216965z"
          fill="#999999"
          p-id="12118"
        ></path>
        <path d="M479.688218 475.913961v94.216965l81.594272-47.10898z" fill="#CCCCCC" p-id="12119"></path>
      </svg>
    </div> -->
  </div>
</template>

<script setup>
import { ref, unref, reactive, toRefs, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { VueDraggable } from 'vue-draggable-plus';
//import { xxx } from '@/api/index.js';
import upload from './components/upload.vue';
import FormEdit from './components/formSetting.vue';
import perview from './components/preview.vue';
//import CommonMultiColumnList from './components/CommonMultiColumnList.vue';
import {
  i52_uploadedfile_list,
  uploadfile_saveone,
  getQrcode,
  qrcode_one,
  saveQrcode,
  getQrcodebytype,
  getOrSetLocalStorage,
  i12_template_one,
} from '@/api/index.js';
import moment from 'moment';
import { fileput, formatBytes } from '@/utils/ali-oss';
import ehead from '@/views/components/index/head.vue';
import { showToast } from '@/utils/message';
import { ElMessage, ElMessageBox } from 'element-plus';
import login from '@/views/components/index/login.vue';
const loading = ref(true);
let type = ref('');
const value5 = ref(false);
const dialogOverflowVisible2 = ref(false);
const uploaddialogVisible = ref(false);
const uploaddialogVisible2 = ref(false);
const uploaddialogVisible3 = ref(false);
const dialogOverflowVisible = ref(false);
const formdialogVisible = ref(false);
const openform = ref(false);
const carddialogVisible = ref(false);
const mapdialogVisible = ref(false);
const perviewdialogVisible = ref(false);
const tableRandom = ref(getOrSetLocalStorage('groupid'));

let rimg = ref(
  'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/pc/urls/%E5%9B%BE%E7%89%87%205%401x.png',
);
let setting = ref({
  pass: '',
  limitedPeriod_start: '',
  limitedPeriod_end: '',
});
const route = useRoute();
const tool = route.query.tool;
console.log('tool:', route.query);
if (tool) {
  dialogOverflowVisible.value = true;
}
const switchChange = (val) => {
  console.log(val, val);
  if (val) {
    dialogOverflowVisible2.value = true;
  } else {
    dialogOverflowVisible2.value = false;
  }
};
const mode = ref('aspectFit');
const imgtype = ref('平铺');
const imgdown = ref(false);
loading.value = false;
const accept = ref('');

const commonList = ref([
  {
    name: 'photo',
    title: '文字',
    img2: 'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/ICON%E4%BA%BF%E7%A0%81%E4%BA%92%E8%81%94%E5%9B%BE%E6%A0%87/%E7%94%9F%E7%A0%81%E5%9B%BE%E6%A0%87/%E6%96%87%E5%AD%97.png',
  },
  {
    name: 'photo',
    title: '图片',
    img2: 'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/ICON%E4%BA%BF%E7%A0%81%E4%BA%92%E8%81%94%E5%9B%BE%E6%A0%87/%E7%94%9F%E7%A0%81%E5%9B%BE%E6%A0%87/%E5%9B%BE%E7%89%87.png',
  },
  {
    name: 'lock',
    title: '视频',
    img2: 'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/ICON%E4%BA%BF%E7%A0%81%E4%BA%92%E8%81%94%E5%9B%BE%E6%A0%87/%E7%94%9F%E7%A0%81%E5%9B%BE%E6%A0%87/%E8%A7%86%E9%A2%91.png',
  },
  {
    name: 'star',
    title: '音频',
    img2: 'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/ICON%E4%BA%BF%E7%A0%81%E4%BA%92%E8%81%94%E5%9B%BE%E6%A0%87/%E7%94%9F%E7%A0%81%E5%9B%BE%E6%A0%87/%E9%9F%B3%E9%A2%91.png',
  },
  {
    name: 'photo',
    title: '文档',
    img2: 'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/ICON%E4%BA%BF%E7%A0%81%E4%BA%92%E8%81%94%E5%9B%BE%E6%A0%87/%E7%94%9F%E7%A0%81%E5%9B%BE%E6%A0%87/%E6%96%87%E4%BB%B6.png',
  },
  {
    name: 'star',
    title: '表单',
    img2: 'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/ICON%E4%BA%BF%E7%A0%81%E4%BA%92%E8%81%94%E5%9B%BE%E6%A0%87/%E7%94%9F%E7%A0%81%E5%9B%BE%E6%A0%87/%E8%A1%A8%E5%8D%95.png',
  },
  {
    name: 'star',
    title: '连接',
    img2: 'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/ICON%E4%BA%BF%E7%A0%81%E4%BA%92%E8%81%94%E5%9B%BE%E6%A0%87/%E7%94%9F%E7%A0%81%E5%9B%BE%E6%A0%87/%E6%88%91%E7%9A%84%E9%93%BE%E6%8E%A5.png',
  },
  {
    name: 'lock',
    title: '联系方式',
    img2: 'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/ICON%E4%BA%BF%E7%A0%81%E4%BA%92%E8%81%94%E5%9B%BE%E6%A0%87/%E7%94%9F%E7%A0%81%E5%9B%BE%E6%A0%87/%E7%94%B5%E8%AF%9D.png',
  },

  {
    name: 'lock',
    title: '地理位置',
    img2: 'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/ICON%E4%BA%BF%E7%A0%81%E4%BA%92%E8%81%94%E5%9B%BE%E6%A0%87/%E7%94%9F%E7%A0%81%E5%9B%BE%E6%A0%87/%E5%9C%B0%E7%90%86%E4%BD%8D%E7%BD%AE.png',
  },
]);
const formlist = ref([
  {
    title: '基础表单',
    items: [
      {
        title: '单行文本',

        img2: 'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E8%A1%A8%E5%8D%95%E5%9B%BE%E6%A0%87/%E6%96%87%E6%9C%AC%E6%A1%86.png',
      },
      {
        title: '多行文本',

        img2: 'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E8%A1%A8%E5%8D%95%E5%9B%BE%E6%A0%87/%E5%A4%9A%E8%A1%8C%E6%96%87%E6%9C%AC.png',
      },
      {
        title: '数字',

        img2: 'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E8%A1%A8%E5%8D%95%E5%9B%BE%E6%A0%87/%E5%8F%AF%E8%A7%86%E5%8C%96%E5%B9%B3%E5%8F%B0icon_%E6%95%B0%E5%AD%97%E8%BE%93%E5%85%A5.png',
      },
      {
        title: '日期',

        img2: 'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E8%A1%A8%E5%8D%95%E5%9B%BE%E6%A0%87/%E6%97%A5%E6%9C%9F.png',
      },
      {
        title: '时间',

        img2: 'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E8%A1%A8%E5%8D%95%E5%9B%BE%E6%A0%87/%E6%97%B6%E9%97%B4.png',
      },
      {
        title: '单选项',

        img2: 'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E8%A1%A8%E5%8D%95%E5%9B%BE%E6%A0%87/%E5%8D%95%E9%80%89.png',
      },
      {
        title: '多选项',

        img2: 'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E8%A1%A8%E5%8D%95%E5%9B%BE%E6%A0%87/%E5%A4%9A%E9%80%89-%E9%80%89%E4%B8%AD.png',
      },
      {
        title: '检查项',

        img2: 'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E8%A1%A8%E5%8D%95%E5%9B%BE%E6%A0%87/%E6%A3%80%E6%9F%A5%E9%A1%B9.png',
      },
      {
        title: '定位',

        img2: 'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E8%A1%A8%E5%8D%95%E5%9B%BE%E6%A0%87/%E5%AE%9A%E4%BD%8D.png',
      },
      {
        title: '地址',

        img2: 'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E8%A1%A8%E5%8D%95%E5%9B%BE%E6%A0%87/%E5%9C%B0%E5%9D%80.png',
      },
      {
        title: '表格',

        img2: 'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E8%A1%A8%E5%8D%95%E5%9B%BE%E6%A0%87/%E8%A1%A8%E6%A0%BC.png',
      },
      {
        title: '自增表格',

        img2: 'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E8%A1%A8%E5%8D%95%E5%9B%BE%E6%A0%87/__%E8%87%AA%E5%A2%9E%E7%BB%84%E4%BB%B6-%E8%87%AA%E5%A2%9E%E8%A1%A8%E6%A0%BC.png',
      },
      {
        title: 'NPS量表',

        img2: 'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E8%A1%A8%E5%8D%95%E5%9B%BE%E6%A0%87/%E8%B4%A8%E9%87%8F%E6%A3%80%E6%B5%8B.png',
      },
      {
        title: '评价',

        img2: 'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E8%A1%A8%E5%8D%95%E5%9B%BE%E6%A0%87/%E8%AF%84%E4%BB%B7%E6%98%9F%E6%98%9F2.png',
      },
      {
        title: '分组标题',

        img2: 'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E8%A1%A8%E5%8D%95%E5%9B%BE%E6%A0%87/%E6%A0%87%E9%A2%98%E6%A0%8F.png',
      },
      {
        title: '手写签名',

        img2: 'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E8%A1%A8%E5%8D%95%E5%9B%BE%E6%A0%87/m-%E7%AD%BE%E5%90%8D.png',
      },
    ],
  },
  {
    title: '多媒体类',
    items: [
      {
        title: '上传图片',

        img2: 'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E8%A1%A8%E5%8D%95%E5%9B%BE%E6%A0%87/%E4%B8%8A%E4%BC%A0-%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87-copy.png',
      },
      {
        title: '上传视频',

        img2: 'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E8%A1%A8%E5%8D%95%E5%9B%BE%E6%A0%87/%E4%B8%8A%E4%BC%A0%E8%A7%86%E9%A2%91.png',
      },
    ],
  },
  {
    title: '个人信息',
    items: [
      {
        title: '姓名',

        img2: 'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E8%A1%A8%E5%8D%95%E5%9B%BE%E6%A0%87/%E5%A7%93%E5%90%8D.png',
      },
      {
        title: '手机号',

        img2: 'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E8%A1%A8%E5%8D%95%E5%9B%BE%E6%A0%87/%E4%BF%AE%E6%94%B9%E6%89%8B%E6%9C%BA%E5%8F%B7%E7%A0%81.png',
      },
      {
        title: '身份证',

        img2: 'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E8%A1%A8%E5%8D%95%E5%9B%BE%E6%A0%87/%E8%BA%AB%E4%BB%BD%E8%AF%81.png',
      },
      {
        title: '性别',

        img2: 'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E8%A1%A8%E5%8D%95%E5%9B%BE%E6%A0%87/%E6%80%A7%E5%88%AB.png',
      },
      {
        title: '年龄',

        img2: 'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E8%A1%A8%E5%8D%95%E5%9B%BE%E6%A0%87/%E5%B9%B4%E9%BE%84.png',
      },
      {
        title: '工号',

        img2: 'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E8%A1%A8%E5%8D%95%E5%9B%BE%E6%A0%87/KHCFDC_%E5%91%98%E5%B7%A5%E5%B7%A5%E5%8F%B7-copy.png',
      },
      {
        title: '车牌',

        img2: 'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E8%A1%A8%E5%8D%95%E5%9B%BE%E6%A0%87/%E8%BD%A6%E7%89%8C%E8%AF%86%E5%88%AB.png',
      },
      {
        title: '名片',

        img2: 'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E8%A1%A8%E5%8D%95%E5%9B%BE%E6%A0%87/%E5%90%8D%E7%89%87%E6%A0%B7%E5%BC%8F.png',
      },
    ],
  },
]);
let id = ref(0);
let title = ref('');
let eqtId = ref(0);
let list = ref([]);
let selectIndex = ref(0);
function formatDate(date) {
  const year = date.getFullYear();
  const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份是从0开始的
  const day = date.getDate().toString().padStart(2, '0');
  const hour = date.getHours().toString().padStart(2, '0');
  const minute = date.getMinutes().toString().padStart(2, '0');
  const second = date.getSeconds().toString().padStart(2, '0');

  return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
}
function perviews() {
  perviewdialogVisible.value = true;
}
function save() {
  console.log('setting:', setting.value.limitedPeriod_start);
  const data = {};
  data.id = id.value;
  data.eqTitle = title.value || formatDate(new Date());

  data.eqJson = JSON.stringify(list.value);
  data.eqType = 1;
  data.eqStatus = 1;
  data.eqPass = setting.value.pass === '' ? '' : setting.value.pass;
  data.eqLimitedperiod = setting.value.limitedPeriod_start === '' && setting.value.limitedPeriod_end === '' ? 0 : 1;
  data.eqLimitedperiodStart = setting.value.limitedPeriod_start === '' ? null : `${setting.value.limitedPeriod_start}`;
  data.eqLimitedperiodEnd = setting.value.limitedPeriod_end === '' ? null : `${setting.value.limitedPeriod_end}`;
  data.eqOpenmode = 0;
  data.eqtId = eqtId.value;
  data.recordRandom = tableRandom.value;
  // if (data.eqTitle === '' || data.eqTitle === null || data.eqTitle === undefined) {
  //   uni.showToast({ title: '请输入标题', icon: 'error' })
  //   return false
  // }
  // else {
  saveQrcode(data).then((res) => {
    console.log('res', res);
    if (res.data.code == 200) {
      localStorage.removeItem('groupid');
      rimg.value = res.data.data.codeinfo.qrcodeTitleimg;
      ElMessage({
        message: '保存成功',
        type: 'success',
      });
      // uni.navigateTo({
      //   url: `/pages/main/ecode?id=${res.data.codeinfo.id}`,
      // });
    } else {
      // uni.showModal({
      //   title: '提示',
      //   content: res.msg,
      //   cancelText: '取消', // 取消按钮的文字
      //   confirmText: '升级会员', // 确认按钮的文字
      //   showCancel: true, // 是否显示取消按钮，默认为 true
      //   confirmColor: '#f55850',
      //   success: (res) => {
      //     if (res.confirm) {
      //       console.log('comfirm'); // 点击确定之后执行的代码
      //       uni.navigateTo({
      //         url: `/pages/vip/index`,
      //       });
      //     } else {
      //       console.log('cancel'); // 点击取消之后执行的代码
      //     }
      //   },
      // });
    }
  });
}
function openMap() {
  mapdialogVisible.value = true;
}
function selectcard(item) {
  console.log('item:', item);
  const d = {
    key: '个人信息',

    item: { title: '名片', card: item.id },
    isActive: false,
  };
  d.item.name = '名片';
  d.item.value = JSON.parse(item.eqJson);
  d.item.instruction = '';
  d.item.setting = [];
  console.log('d:', d);

  list.value.push(d);
  carddialogVisible.value = false;
}
window.addEventListener(
  'message',
  function (event) {
    // 接收位置信息，用户选择确认位置点后选点组件会触发该事件，回传用户的位置信息
    var loc = event.data;
    if (loc && loc.module == 'locationPicker') {
      //防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
      // loc 这里面存放详细的位置信息
      //emit('addressInfo', loc);
      console.log('loc:', loc);

      list.value[selectIndex.value].value = loc.poiaddress;
      list.value[selectIndex.value].name = loc.poiaddress;
      list.value[selectIndex.value].longitude = loc.latlng.lng;
      list.value[selectIndex.value].latitude = loc.latlng.lat;
      mapdialogVisible.value = false;
    }
  },
  true,
);
let itemstr = ref('');
function openEdit(index) {
  selectIndex.value = index;
  list.value[index].item.r = new Date();
  itemstr.value = JSON.stringify(list.value[index].item);

  formdialogVisible.value = true;
}
function returnData2(data) {
  console.log('data', data.item);
  //console.log(data.index, this.list[data.index].item.name);
  const l = list.value;
  l[data.index].item = data.item;
  console.log('l', l);
  list.value[data.index].item = data.item;

  // this.$set(this.list[data.index], 'item', data.item)

  // if (data.title === '单选项') {
  //   this.radioselect = this.getActiveRadioName(this.list[data.index].item.radiolist)
  //   console.log('this.radioselect', this.radioselect)
  // }

  formdialogVisible.value = false;
}
const cardlist = ref([]);
function click(index, item) {
  if (item.title === '名片') {
    console.log('card');
    getQrcodebytype(2).then((res) => {
      cardlist.value = res.data.data.listdata;
      cardlist.value.forEach((item) => {
        const j = JSON.parse(item.eqJson);
        item.uNickname = j.name;
        item.uAvatar = j.avatar;
      });
      //this.$refs.popup.open('bottom')
      carddialogVisible.value = true;
    });
  } else {
    const d = {
      key: formlist.value[index].title,

      item,
      isActive: false,
    };
    d.item.name = d.item.title;
    d.item.instruction = '';
    d.item.setting = [];
    if (item.title === '单选项') {
      d.item.radiolist = [
        {
          name: '选项1',
          disabled: false,
        },
        {
          name: '选项2',
          disabled: false,
        },
      ];
    }
    if (item.title === '多选项') {
      d.item.checkboxlist = [
        {
          name: '选项1',
          disabled: false,
          isActive: false,
        },
        {
          name: '选项2',
          disabled: false,
          isActive: false,
        },
      ];
    }
    if (item.title === '表格') {
      d.item.table = [
        {
          th: '标题1',
          td: '内容1',
        },
        {
          th: '标题2',
          td: '内容2',
        },
      ];
    }
    if (item.title === '自增表格') {
      d.item.table = [
        {
          th: '标题1',
          td: '内容1',
          type: 0,
        },
        {
          th: '标题2',
          td: '内容2',
          type: 0,
        },
      ];
      d.item.max = 3;
    }
    if (item.title === '评价') {
      d.item.count = 5;
      d.item.value = 3;
    }
    if (item.title === 'NPS量表') {
      d.item.value = 3;
      d.item.min = '没有可能';
      d.item.max = '极有可能';
    }
    if (item.title === '检查项') {
      d.item.list = [
        {
          title: '标题1',
        },
        {
          title: '标题2',
        },
        {
          title: '标题3',
        },
      ];
      d.item.value = [3];
    }
    if (item.title === '地址') {
      d.item.city = '';
      d.item.address = '';
    }
    if (item.title === '手机号') {
      d.item.show = false;
    }
    if (item.title === '性别') {
      d.item.radiolist = [
        {
          name: '男',
          disabled: false,
        },
        {
          name: '女',
          disabled: false,
        },
      ];
    }
    if (item.title === '车牌') {
      d.item.show = false;
    }
    //this.$emit('returndata', d)
    list.value.push(d);
  }
  // uni.showToast({
  //   icon: 'none',
  //   title: `${index}点击了第${item.title}个`,
  // })
}
function containsRequired(arr, txt) {
  // console.log('arr', arr)
  // 先做一个简单的类型检查确保传入的是数组
  if (!Array.isArray(arr)) {
    throw new TypeError('传入的参数不是一个数组');
  }

  // 使用 includes 方法检查数组中是否含有 '必填'
  return arr.includes(txt);
}
function returnOfficeIcon(filePath) {
  console.log('filePath:', filePath);
  const extension = filePath.split('.').pop().toLowerCase();
  if (extension === 'doc' || extension === 'docx') {
    return 'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E5%9B%BE%E6%96%87%E5%9B%BE%E6%A0%87/WORD.png';
  } else if (extension === 'xls' || extension === 'xlsx') {
    return 'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E5%9B%BE%E6%96%87%E5%9B%BE%E6%A0%87/Microsoft-Excel.png';
  } else if (extension === 'ppt' || extension === 'pptx') {
    return 'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E5%9B%BE%E6%96%87%E5%9B%BE%E6%A0%87/PPT.png';
  } else if (extension === 'pdf') {
    return 'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E5%9B%BE%E6%96%87%E5%9B%BE%E6%A0%87/PDF.png';
  } else {
    return 'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E5%9B%BE%E6%96%87%E5%9B%BE%E6%A0%87/%E5%85%B6%E4%BB%96%E6%96%87%E4%BB%B6.png';
  }
}
function addinfolist(txt) {
  //console.log('this.list[this.selectindex]:', this.list[this.selectindex]);
  if (list.value[selectIndex.value].value.length < 6) {
    if (list.value[selectIndex.value].value.length === 0) {
      list.value[selectIndex.value].value = [];
    }
    list.value[selectIndex.value].value.push({
      type: txt,
      text: txt,
      value: '',
    });
  } else {
    //uni.showToast({ icon: 'none', title: '最多添加五项信息！' });
    ElMessage({
      message: '最多添加五项信息！',
      type: 'warning',
    });
  }
}
function addComponents(title) {
  console.log(title);
  const d = {
    key: title,
    value: '',

    grid: 'w-full',
  };
  if (title == '文字') {
    d.wzSetting = {
      open: false,
      fontSize: 14,
      color: '#000',
      bgColor: '#fff',
      textAlign: {
        name: '左对齐',
        value: 'left',
      },
    };
    d.v = 'v3';
    list.value.push(d);
    console.log('list.value:', list.value);
  } else if (title == '图片') {
    type.value = '图片';
    accept.value = '.png, .jpeg,.gif, .bmp, .webp';
    list.value.push(d);
    //uploaddialogVisible.value = true;
  } else if (title == '视频') {
    type.value = '视频';
    accept.value = '.mp4,.avi,.mov,.wav,.aac,.m4a,.mp3,.wav,.aac';
    list.value.push(d);
  } else if (title == '音频') {
    type.value = '音频';
    accept.value = '.mp3,.wav,.aac,.m4a';
    list.value.push(d);
  } else if (title == '文档') {
    type.value = '文件';
    d.key = '文件';
    accept.value = '.doc,.xlsx,.xls,.docx,.ppt,.pptx,.pdf';
    list.value.push(d);
  } else if (title == '表单') {
    openform.value = !openform.value;
  } else if (title == '连接') {
    type.value = '连接';

    d.linktype = 0;
    d.link = '';
    d.linkname = '';
    list.value.push(d);
  } else if (title == '联系方式') {
    type.value = '信息';
    d.key = '信息';
    d.value = [
      {
        type: '标题',
        text: '标题',
        value: '',
      },
      {
        type: '电话',
        text: '电话',
        value: '',
      },
      {
        type: '邮箱',
        text: '邮箱',
        value: '',
      },
      {
        type: '文本',
        text: '文本',
        value: '',
      },
    ];
    //d.img2 = 'https://ecodestore.oss-cn-beijing.aliyuncs.com/%E6%96%B0%E7%89%88UI%E5%9B%BE%E6%A0%87/ICON%E4%BA%BF%E7%A0%81%E4%BA%92%E8%81%94%E5%9B%BE%E6%A0%87/%E7%94%9F%E7%A0%81%E5%9B%BE%E6%A0%87/%E7%94%B5%E8%AF%9D.png'
    console.log('d:', d);
    list.value.push(d);
    console.log('list.value:', list.value);
  } else if (title == '地理位置') {
    type.value = '地图';
    d.key = '地图';
    list.value.push(d);
  }
}

function checked1change(index, value) {
  console.log('index:', index);
  console.log(value);
  if (value == 'left') {
    list.value[index].wzSetting.textAlign = {
      name: '左对齐',
      value: 'left',
    };
  } else if (value == 'center') {
    list.value[index].wzSetting.textAlign = {
      name: '居中对齐',
      value: 'center',
    };
  } else if (value == 'right') {
    list.value[index].wzSetting.textAlign = {
      name: '右对齐',
      value: 'right',
    };
  }
}
const swapWithNext = (item) => {
  const index = list.value.indexOf(item);
  if (index > -1 && index < list.value.length - 1) {
    const newList = [...list.value];
    newList[index] = newList[index + 1];
    newList[index + 1] = item;
    list.value = newList;
  }
};

const swapWithPrevious = (item) => {
  const index = list.value.indexOf(item);
  if (index > 0 && index < list.value.length) {
    const newList = [...list.value];
    newList[index] = newList[index - 1];
    newList[index - 1] = item;
    list.value = newList;
  }
};
function removeItem(index) {
  // 使用splice方法删除指定索引的元素
  const item = list.value[index];
  console.log('item:', item);
  // if (item.fileId) {
  //   uploadfile_saveone(item.fileId, item.value, 0, this.id);
  // }
  list.value.splice(index, 1);
  // 通知Vue更新视图
  //this.$forceUpdate();
  //this.$emit('list', this.list);
}
function updateMessage(data) {
  console.log('data:', data);
  //list.value = data;
  if (type.value == '图片') {
    data.fileList.forEach((element) => {
      if (data.type == '平铺') {
        list.value.push(element);
      }
    });
  }
  uploaddialogVisible.value = false;
}
function UploadOss(option) {
  console.log('UploadOss', option);
  let objName = option.file.name;
  let fileName = moment().format('YYYY/MM/DD');
  //this.uploadLoading = true
  fileput(`pc/${fileName}/${objName}`, option.file).then((res) => {
    console.log(res);
    if (res.res.statusCode === 200) {
      console.log('上传成功', res);
      // progressFlag.value = false;
      console.log('option.file', option.file);
      //console.log('value.value :', value.value);
      if (type.value == '图片') {
        uploadfile_saveone(0, res.url, option.file.size, id.value).then(async (f) => {
          if (f.data.code != 200) {
            showToast('上传失败:' + f.data.msg, 'error');
          } else {
            let d = {
              key: '图片',
              value: res.url,
              name: option.file.name,
              fileId: f.data.data.uploadfileinfo.fileId,
              size: formatBytes(option.file.size),
              grid: 'w-full',
              mode: 'aspectFit',
              uid: option.file.uid,
              download: ['允许下载'],
            };
            console.log('d:', d);
            if (option.data.type == '轮播') {
              list.value[option.data.index].value.push(res.url);
            } else {
              if (list.value[option.data.index].value == '') {
                list.value[option.data.index] = d;
              } else {
                //list.value.push(d);
                //push到 option.data.index之后
                list.value.splice(option.data.index + 1, 0, d);
              }
            }
          }
          //fileList.value.push(d);
          //uploadedfile_list();
          //console.log('fileList:', fileList.value);
        });
      } else if (type.value == '视频') {
        uploadfile_saveone(0, res.url, option.file.size, id.value).then(async (f) => {
          console.log('f:', f);

          if (f.data.code != 200) {
            showToast('上传失败:' + f.data.msg, 'error');
          } else {
            list.value[option.data.index] = {
              key: '视频',
              value: res.url,
              grid: 'w-full',
              fileId: f.data.data.uploadfileinfo.fileId,
              download: [],
              mode: 'aspect-16_a_9',
            };

            console.log(':', list.value[option.data.index]);
          }
        });
      } else if (type.value == '音频') {
        uploadfile_saveone(0, res.url, option.file.size, id.value).then(async (f) => {
          console.log('f:', f);

          if (f.data.code != 200) {
            showToast('上传失败:' + f.data.msg, 'error');
          } else {
            list.value[option.data.index] = {
              key: '音频',
              value: res.url,
              grid: 'w-full',
              fileId: f.data.data.uploadfileinfo.fileId,
              download: [],
            };

            console.log(':', list.value[option.data.index]);
          }
        });
      } else if (type.value == '文件') {
        uploadfile_saveone(0, res.url, option.file.size, id.value).then(async (f) => {
          console.log('f:', f);

          if (f.data.code != 200) {
            showToast('上传失败:' + f.data.msg, 'error');
          } else {
            list.value[option.data.index] = {
              key: '文件',
              value: res.url,
              grid: 'w-full',
              size: formatBytes(option.file.size),
              fileId: f.data.data.uploadfileinfo.fileId,
              download: [],
            };

            console.log(':', list.value[option.data.index]);
          }
        });
      }
    }
  });
}
function UploadOssEdit(option) {
  console.log('UploadOss', option);
  let objName = option.file.name;
  let fileName = moment().format('YYYY/MM/DD');
  //this.uploadLoading = true
  fileput(`pc/${fileName}/${objName}`, option.file).then((res) => {
    console.log(res);
    if (res.res.statusCode === 200) {
      console.log('上传成功', res);
      // progressFlag.value = false;
      console.log('option.file', option.file);
      //console.log('value.value :', value.value);
      if (type.value == '图片') {
        uploadfile_saveone(0, res.url, option.file.size, id.value).then(async (f) => {
          if (f.data.code != 200) {
            showToast('上传失败:' + f.data.msg, 'error');
          } else {
            list.value[option.data.index].value = res.url;
            list.value[option.data.index].name = option.file.name;
            list.value[option.data.index].fileId = f.data.data.uploadfileinfo.fileId;
            list.value[option.data.index].size = formatBytes(option.file.size);
          }
          //fileList.value.push(d);
          //uploadedfile_list();
          //console.log('fileList:', fileList.value);
        });
      } else if (type.value == '视频') {
        if (option.data.type == '封面') {
          list.value[option.data.index].fm = res.url;
        } else {
          uploadfile_saveone(0, res.url, option.file.size, id.value).then(async (f) => {
            if (f.data.code != 200) {
              showToast('上传失败:' + f.data.msg, 'error');
            } else {
              list.value[option.data.index].value = res.url;
              list.value[option.data.index].name = option.file.name;
              list.value[option.data.index].fileId = f.data.data.uploadfileinfo.fileId;
              list.value[option.data.index].size = formatBytes(option.file.size);
            }
            //fileList.value.push(d);
            //uploadedfile_list();
            //console.log('fileList:', fileList.value);
          });
        }
      } else if (type.value == '音频') {
        uploadfile_saveone(0, res.url, option.file.size, id.value).then(async (f) => {
          if (f.data.code != 200) {
            showToast('上传失败:' + f.data.msg, 'error');
          } else {
            list.value[option.data.index].value = res.url;
            list.value[option.data.index].name = option.file.name;
            list.value[option.data.index].fileId = f.data.data.uploadfileinfo.fileId;
            list.value[option.data.index].size = formatBytes(option.file.size);
          }
          //fileList.value.push(d);
          //uploadedfile_list();
          //console.log('fileList:', fileList.value);
        });
      } else if (type.value == '文件') {
        uploadfile_saveone(0, res.url, option.file.size, id.value).then(async (f) => {
          if (f.data.code != 200) {
            showToast('上传失败:' + f.data.msg, 'error');
          } else {
            if (list.value[option.data.index].key == '文件列表') {
              list.value[option.data.index].value.push({ value: res.url, size: option.file.size });
            } else {
              list.value[option.data.index].value = res.url;
              list.value[option.data.index].name = option.file.name;
              list.value[option.data.index].fileId = f.data.data.uploadfileinfo.fileId;
              list.value[option.data.index].size = formatBytes(option.file.size);
            }
          }
          //fileList.value.push(d);
          //uploadedfile_list();
          //console.log('fileList:', fileList.value);
        });
      }
    }
  });
}
function getTypeEN() {
  //console.log('props.type:', props.filetype);
  if (type.value === '视频') {
    return 'video';
  } else if (type.value === '音频') {
    return 'audio';
  } else if (type.value === '图片' || type.value === '滚动') {
    return 'img';
  } else if (type.value === '文件' || type.value === '文件列表') {
    return 'doc';
  }
}
const historylist = ref([]);
const selected = ref([]);
function uploadedfile_list() {
  i52_uploadedfile_list().then((res) => {
    console.log('getTypeEN():', getTypeEN());
    selected.value = [];
    historylist.value = res.data.data.listdata
      .filter((x) => x.fileType === getTypeEN())
      .sort((a, b) => {
        // 将字符串日期转换为日期对象
        const dateA = new Date(a.CreateDate);
        const dateB = new Date(b.CreateDate);

        // 比较日期并返回比较结果
        return dateB - dateA; // 倒序
      })
      .slice(0, 50);
    // if (type.value === '图片') {
    //   historyimglist.value = historylist.value.map((item) => {
    //     return item.fileUrl;
    //   });
    // }
    console.log(':', historylist.value);
  });
}

const toggleSelect = (src) => {
  const index = selected.value.indexOf(src.fileId);
  if (index > -1) {
    selected.value.splice(index, 1);
  } else {
    selected.value.push(src.fileId);
  }
};

const confirmSelection = () => {
  if (type.value === '图片') {
    const selectedImages = historylist.value.filter((image) => selected.value.includes(image.fileId));
    console.log('Selected images:', selectedImages);
    selectedImages.forEach((image, index) => {
      let d = {
        key: '图片',
        value: image.fileUrl,
        name: image.fileUrl,
        fileId: image.fileId,
        size: formatBytes(image.fileSize),
        grid: 'w-full',
        mode: 'aspectFit',
        uid: image.fileId,
        download: ['允许下载'],
      };
      if (list.value[selectIndex.value].key == '滚动') {
        list.value[selectIndex.value].value.push(image.fileUrl);
      } else {
        if (index == 0) {
          list.value[selectIndex.value] = d;
        } else {
          //list.value.push(d);
          //push到 option.data.index之后
          list.value.splice(selectIndex.value + 1, 0, d);
        }
      }
    });

    // 这里可以进行进一步处理，例如发送请求或更新状态
  } else if (type.value === '视频') {
    const selectedImages = historylist.value.filter((image) => selected.value.includes(image.fileId));
    console.log('Selected images:', selectedImages);
    selectedImages.forEach((image, index) => {
      let d = {
        key: '视频',
        value: image.fileUrl,

        fileId: image.fileId,
        size: formatBytes(image.fileSize),
        grid: 'w-full',
        download: [],
        mode: 'aspect-16_a_9',
      };

      if (index == 0) {
        list.value[selectIndex.value] = d;
      } else {
        //list.value.push(d);
        //push到 option.data.index之后
        list.value.splice(selectIndex.value + 1, 0, d);
      }
    });

    // 这里可以进行进一步处理，例如发送请求或更新状态
  } else if (type.value === '音频') {
    const selectedImages = historylist.value.filter((image) => selected.value.includes(image.fileId));
    console.log('Selected images:', selectedImages);
    selectedImages.forEach((image, index) => {
      let d = {
        key: '音频',
        value: image.fileUrl,

        fileId: image.fileId,
        size: formatBytes(image.fileSize),
        grid: 'w-full',
      };

      if (index == 0) {
        list.value[selectIndex.value] = d;
      } else {
        //list.value.push(d);
        //push到 option.data.index之后
        list.value.splice(selectIndex.value + 1, 0, d);
      }
    });

    // 这里可以进行进一步处理，例如发送请求或更新状态
  } else if (type.value === '文件') {
    const selectedImages = historylist.value.filter((image) => selected.value.includes(image.fileId));
    console.log('Selected images:', selectedImages);
    selectedImages.forEach((image, index) => {
      if (list.value[selectIndex.value].key == '文件列表') {
        list.value[selectIndex.value].value.push({ value: image.fileUrl, size: formatBytes(image.fileSize) });
      } else {
        let d = {
          key: '文件',
          value: image.fileUrl,

          fileId: image.fileId,
          size: formatBytes(image.fileSize),
          grid: 'w-full',
        };

        if (index == 0) {
          list.value[selectIndex.value] = d;
        } else {
          //list.value.push(d);
          //push到 option.data.index之后
          list.value.splice(selectIndex.value + 1, 0, d);
        }
      }
    });

    // 这里可以进行进一步处理，例如发送请求或更新状态
  }

  uploaddialogVisible2.value = false;
};
const imgdownchange = (value) => {
  console.log('value:', value);
};
const url = ref('');
const linklist = ref([]);
function isURL(str) {
  // 简单的 URL 正则表达式，用于匹配大多数常见的网址格式
  const urlRegex = /^(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/;
  return urlRegex.test(str);
}
const selectlinkindex = ref();
function settinglink(index) {
  url.value = '';
  selectIndex.value = index;
  if (isURL(list.value[selectIndex.value].link)) {
    url.value = list.value[selectIndex.value].link;
  }
  getQrcode().then((res) => {
    linklist.value = res.data.data.listdata.sort((a, b) => {
      const timeA = new Date(a.eqUpdatedTime).getTime();
      const timeB = new Date(b.eqUpdatedTime).getTime();
      return timeB - timeA;
    });
    // 遍历this.list
    linklist.value.forEach((item) => {
      if (item.eqType === 2) {
        const j = JSON.parse(item.eqJson);
        console.log('j', j);
        j.name === undefined ? (j.name = '电子名片') : (j.name = `${j.name}的电子名片`);
        item.eqTitle = j.name;
      }
    });
  });
  console.log('linklist:', linklist);
  // this.$refs.linkpopup.open('bottom');
  // console.log('this.list', this.list);
}
function setlink() {
  if (url.value != '') {
    list.value[selectIndex.value].linktype = 0;
    list.value[selectIndex.value].link = url.value;
    list.value[selectIndex.value].linkname = url.value;
  }
}
function setlink2(item) {
  if (item === null) {
    list.value[selectIndex.value].linktype = '';
    list.value[selectIndex.value].link = '';
    list.value[selectIndex.value].linkname = '';
  } else {
    list.value[selectIndex.value].linktype = 1;
    list.value[selectIndex.value].link = item.id;
    list.value[selectIndex.value].linkname = item.eqTitle;
  }
}
function selectGridChanged(e, index) {
  selectIndex.value = index;
  console.log(e); // 可以拿到绑定的整个对象
  console.log(index); // xxx
  if (e == '轮播') {
    list.value[selectIndex.value] = {
      key: '滚动',
      value: [list.value[selectIndex.value].value],
      grid: 'w-full',
      mode: 'aspectFit',
    };
  }
}
function filelist(item, index) {
  list.value[index] = {
    key: '文件列表',
    value: [{ value: item.value, size: item.size }],
    grid: 'w-full',
  };
}
function removeItemById2(item, index, index2) {
  console.log('item:', item);
  // const i = this.list[index].value.findIndex(itm => itm.value === item.value)
  // if (i > -1) {
  list.value[index].value.splice(index2, 1);
  // }
  uploadfile_saveone(item.fileId, item, 0, id.value);

  if (list.value[index].value.length === 0) {
    const item2 = list.value[index];

    if (item2.fileId) {
      uploadfile_saveone(item2.fileId, item2.value, 0, id.value);
    }
    list.value.splice(index, 1);
  }
}
function pingpu(index) {
  ElMessageBox.confirm('此操作会把滚动播放的图片，变成单张的图片', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'info',
  })
    .then(() => {
      const items = list.value[index].value;
      console.log('items:', items);

      if (items.length > 0) {
        items.forEach((x, i) => {
          uploadfile_saveone(0, x, 0, id.value).then((f) => {
            if (f.data.code === 200) {
              const d = {
                key: '图片',
                value: x,
                grid: 'w-full',
                mode: 'aspectFit',
                fileId: f.data.data.uploadfileinfo.fileId,
                link: '',
                linkname: '',
                title: '',
                download: ['允许下载'],
              };
              console.log('d:', d);
              list.value.splice(index + i + 1, 0, d);
            }
          });
        });
        list.value.splice(index, 1);
      }
    })
    .catch(() => {});
}

if (route.query.id) {
  id.value = route.query.id;
  qrcode_one(id.value).then((res) => {
    console.log('res111111111111', res.data);
    if (res.data.code == 200) {
      title.value = res.data.data.onedata.eqTitle;
      eqtId.value = res.data.data.onedata.eqtId;
      list.value = JSON.parse(res.data.data.onedata.eqJson);
      rimg.value = res.data.data.onedata.eqUrl;

      //     data.eqPass = setting.value.pass === '' ? '' : setting.value.pass;
      // data.eqLimitedperiod = setting.value.limitedPeriod_start === '' && setting.value.limitedPeriod_end === '' ? 0 : 1;
      // data.eqLimitedperiodStart = setting.value.limitedPeriod_start === '' ? null : `${setting.value.limitedPeriod_start}`;
      // data.eqLimitedperiodEnd = setting.value.limitedPeriod_end === '' ? null : `${setting.value.limitedPeriod_end}`;
      setting.value = {
        pass: res.data.data.onedata.eqPass !== '' ? res.data.data.onedata.eqPass : '',
        eqLimitedperiodStart: res.data.data.onedata.eqLimitedperiodStart,
        eqLimitedperiodEnd: res.data.data.onedata.eqLimitedperiodEnd,
        eqLimitedperiod: res.data.data.onedata.eqLimitedperiodStart || res.data.data.onedata.eqLimitedperiodEnd ? 1 : 0,
      };

      //uni.setStorage({ key: 'groupid', data: res.data.onedata.recordRandom })
      localStorage.setItem('groupid', res.data.data.onedata.recordRandom);
      tableRandom.value = res.data.data.onedata.recordRandom;
      list.value.forEach((element, i) => {
        if (element.key === '文本') {
          element.key = '文字';
          element.value = element.value.replace(/<[^>]*>/g, '');
          if (!element.wzSetting) {
            element.wzSetting = {
              open: false,
              fontSize: 14,
              color: '#000',
              bgColor: '#fff',
              textAlign: {
                name: '左对齐',
                value: 'left',
              },
            };
            element.v = 'v3';
          }
        }
        if (element.item && element.item.title === '名片') {
          qrcode_one(element.item.card).then((res2) => {
            console.log('res222222222222222222222', res2);
            if (res2.data.code == 200) {
              list.value[i].item.value = JSON.parse(res2.data.data.onedata.eqJson);
            }
          });
        }
      });
      console.log('this.list', list.value);
    }
  });
} else if (route.query.tid) {
  eqtId.value = route.query.tid;
  i12_template_one(eqtId.value).then((res) => {
    console.log('res111111111111', res);
    if (res.data.code == 200) {
      title.value = res.data.data.onedata.tName;
      list.value = JSON.parse(res.data.data.onedata.tJson);
      list.value.forEach((element, i) => {
        if (element.key === '文本') {
          element.key = '文字';
          element.value = element.value.replace(/<[^>]*>/g, '');
          if (!element.wzSetting) {
            element.wzSetting = {
              open: false,
              fontSize: 14,
              color: '#000',
              bgColor: '#fff',
              textAlign: {
                name: '左对齐',
                value: 'left',
              },
            };
            element.v = 'v3';
          }
          // if (!element.wzSetting) {
          //   element.wzSetting = this.wzSetting;
          // }
        }
        if (element.item && element.item.title === '名片') {
          qrcode_one(element.item.card).then((res2) => {
            console.log('res222222222222222222222', res2);
            if (res2.data.code == 200) {
              list.value[i].item.value = JSON.parse(res2.data.data.onedata.eqJson);
            }
          });
        }
      });
      console.log('list.value:', list.value);
      //rimg.value = res.data.data.onedata.eqUrl;
    }
  });
}
</script>
<style>
.el-dialog__wrapper {
  pointer-events: none;
}

.el-dialog {
  pointer-events: auto;
}

.no-header-dialog {
  background: transparent !important;
  box-shadow: 0 0 0 0 rgb(0 0 0 / 0%), 0 8px 20px rgb(0 0 0 / 0%);
}

.no-header-dialog .el-dialog__header {
  display: none;
}

.onerow {
  overflow: hidden; /* 超出容器部分隐藏 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
  white-space: nowrap; /* 不允许文本换行 */
}

.title1::after {
  position: absolute;
  top: 6px;
  left: 0;
  width: 4px;
  height: 20px;
  content: ' ';
  background: #fed440 !important;
  background-color: rgb(18 163 245);
  background-image: initial;
  background-attachment: initial;
  background-position-x: initial;
  background-position-y: initial;
  background-clip: initial;
  background-origin: initial;
  background-size: initial;
  border-radius: 2px;
  background-repeat-x: initial;
  background-repeat-y: initial;
}

.el-color-picker--small .el-color-picker__trigger {
  width: 64px !important;
  height: 24px;
}

.up .el-upload {
  display: block !important;
}

.img .el-image__inner {
  margin: 0 auto !important;
}
</style>
<style scoped>
:deep(.modal-wrap) {
  pointer-events: none !important;
}

:deep(.dialog-wrap) {
  position: absolute;
  top: -30px;
  right: calc(50vw - 800px);
  pointer-events: auto !important;
}
</style>
<style scoped lang="less">
.image-card {
  cursor: pointer;
  transition: transform 0.3s;
}

.image-card:hover {
  transform: scale(1.05);
}

.image-card.selected {
  border: 2px solid #409eff;
}

.image {
  width: 100%;
  height: 100px;
  display: block;
}
.page-editor {
  color: #333;
  height: 100vh;
  width: 100vw;
  background-color: #f7f7f7;
  overflow: hidden;
}
.header {
  width: 100%;
  min-width: 1040px;

  background: #fff;
  box-shadow: 0 0 4px 0 rgba(0, 19, 11, 0.05);
  text-align: center;
  z-index: 1001;
  margin: 0 auto;
  position: relative;
}
.logo {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}
.right-code-box {
  position: fixed;
  right: calc(50vw - 600px);
  top: 126px;
  width: 280px;
  height: 600px;
  max-height: calc(100vh - 140px);
  z-index: 9;
  overflow: hidden;
  background: #fff;
}
.left-code-box {
  position: fixed;
  left: calc(50vw - 720px);
  top: 126px;
  width: 400px;
  height: calc(100vh - 140px);
  max-height: calc(100vh - 140px);
  z-index: 9;
  overflow: scroll;
  background: #fff;
}
.components-box {
  width: 1050px;
  height: 60px;

  margin: 0 auto;
}
.components-item {
  cursor: pointer;
}
.components-item:hover {
  border: 1px solid rgba(250, 210, 0, 1);
  color: rgba(250, 210, 0, 1);
}
.formitem:hover {
  border: 1px solid rgba(250, 210, 0, 1);
}
.carditem:hover {
  border: 1px solid rgba(250, 210, 0, 1);
}
.selected2 {
  border: 1px solid rgba(250, 210, 0, 1);
  color: rgba(250, 210, 0, 1);
}
.con-box-wrap {
  position: relative;
  margin: 0 auto auto auto;
  padding-bottom: 10px;
  width: 600px;
  min-height: calc(100vh - 143px);
  background: #fff;
}
.title-box {
  padding: 0px 10px;
  padding-top: 42px;
}
.con-box {
  position: relative;
  margin: 0 auto auto auto;
  padding-bottom: 20px;
  width: 600px;
  height: calc(100vh - 180px);
  background: #fff;
  overflow: scroll;
}
.summary-dlg {
  .el-overlay-dialog {
    pointer-events: none;
    /deep/ .el-dialog {
      pointer-events: auto;
    }
  }
}
</style>

